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

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

您将 auth 与 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>
    );