无法将字段值从 firestore 存储到变量

Question

我正在尝试将从 firestore users 中的文档读取的字段值 name 存储到变量 userName 以便我可以更改状态值的用户名。一般来说，如何将字段值保存到变量并将其存储在我的组件中？总是，我感谢大家的帮助。

export default class Main extends Component {
state = {
    currentUser: null,
    userName: null
  };

getName = async () => {
    const { currentUser } = firebase.auth();
    this.setState({ currentUser });
    const uid = currentUser.uid;
    let userName = null;
    let docRef = await db.collection("users").doc(uid);
    docRef.get().then(doc => {
      userName = doc.data().name;
      console.log(userName);
      // this prints out "panda"
    });
    console.log(userName);
    // this prints out null
    this.setState({ userName });
  };

  componentWillMount() {
    this.getName();
  }

Answer 1

较低的console.log(userName) 打印空，因为您的await 设置在文档引用的分配上，而不是.get()。 .doc() 返回一个引用，而 .get() 返回一个 Promise。

这导致您的代码不等待.get() 返回的 Promise 并移动通过整个块，从而显示 userName 的 null 值，因为 Promise 尚未解决。有几种不同的方法可以解决这个问题。一种方法是将setState() 放在.then() 块内，如下例所示：

将您的 getName() 更改为：

getName = async () => {
    const { currentUser } = firebase.auth();
    this.setState({ currentUser });
    const uid = currentUser.uid;
    await db
        .collection("users")
        .doc(uid)
        .get()
        .then(doc => {
            if (doc && doc.exists) {
                this.setState({ userName: doc.data().name });
            }
        });
};

我将async/await 留在了那里，以防您在此方法中添加需要等待firebase 查询的进一步逻辑。如果没有，您可以同时删除 async 和 await。