在文本标记中显示来自 Firebase Firestore 的 React Native 中的用户数据

Question

背景 嘿！我正在尝试为我的应用程序主页构建标题。我已经使用 Firebase 成功实现了电子邮件/密码身份验证以及持久凭据。但是，我无法从存储我的用户的 firestore 集合中获取数据。 基本上，我需要的是让我的标题显示“Hello {userName}”，但我完全不知道如何做到这一点。 我的主屏幕是一个函数组件，而不是一个类组件，据我所知，我不能走“componentDidMount()”的方式。

问题

获取当前用户数据并显示特定信息字段（例如他们的名字）的最佳方式是什么？

我将如何在 <Text> 标记中呈现它？是<Text> Hello {this.user.firstName}</Text> 之类的，还是我完全错了？

我的尝试

我知道这与这行代码有关：const usersRef = firebase.firestore().collection('users')，但我不知道该怎么做。也试过这种方法：

    var user = firebase.auth().currentUser;
    var firstName, email, photoUrl, uid, emailVerified;

    if (user != null) {
    firstName = user.firstName;
    email = user.email;
    photoUrl = user.photoURL;
    emailVerified = user.emailVerified;
    uid = user.uid; 
    }

但这似乎不起作用。在最后一个示例中，我这样称呼 firstName：<Text>Hello {firstName}</Text>

Answer 1

您将身份验证与 Firestore 混淆了。 Firebase 身份验证仅提供凭据和登录功能，不会将任何数据输入数据库 (firestore)。您要做的是，当用户注册时，您想在 Firestore 中设置相应的文档，其中包含用户 uid（标识）和所有用户自定义数据（名字等）。

这是一个例子：

  const onRegister = async () => {
    try {
      const credential = await auth.createUserWithEmailAndPassword(
        'email@email.com',
        'password',
      );
      const {uid} = credential;
      // your data here (dont forget to store the uid on the document)
      const user = {
        firstName: 'whatever',
        lastName: 'whatever',
        user_id: uid,
      };
      await firestore().collection('users').doc(uid).set(user);
    } catch {
      //do whatever
    }
  };

然后当您想要获取他们的数据时，您可以访问他们的文档并显示它：

  const [user, setUser] = useState();
  const {uid} = auth().currentUser;

  const getUser = async () => {
    try {
      const documentSnapshot = await firestore()
        .collection('users')
        .doc(uid)
        .get();

      const userData = documentSnapshot.data();
      setUser(userData);
    } catch {
      //do whatever
    }
  };

  // Get user on mount
  useEffect(() => {
    getUser();
  }, []);

  // return info if user is set
    return (
      <Text>{user && user?.firstName}</Text>
    );