如何解决 Reactjs 和 Firebase Google Cloud Firestore 中发生的此错误？

Question

我正在尝试从 Firebase Cloud Firestore 获取数据，并在加载到浏览器时将其加载到我的 Reactjs 应用程序中。但是，我收到以下错误。

错误信息

未处理的拒绝（TypeError）：无法读取未定义的属性“then”

错误发生在以下行：

firebaseService.getUserData(authUser.uid).then(user => { ...

我得到一个初始页面加载，然后延迟大约两秒钟，然后弹出错误。所以我怀疑它来自一些缺失的承诺或回调没有得到正确处理。我曾尝试在多个地方使用asyncawait，但均未成功。

如何解决这个问题以正确获取和加载我的数据？

Auth.js

import firebaseService from 'firebaseService';
...
class Auth extends Component {
  ...
  firebaseCheck = () => {
    firebaseService.onAuthStateChanged(authUser => {
      if (authUser) {
        this.props.showMessage({ message: 'Logging in with Firebase' });
        // Retrieve user data from Firebase
        firebaseService.getUserData(authUser.uid).then(user => { // <-- error occurs here
          this.props.setUserDataFirebase(user, authUser);
          this.props.showMessage({ message: 'Logged in with Firebase' });
        })
      }
    });
  };
}

firebaseService.js

getUserData = userId => {
  if (!firebase.apps.length) {
    return;
  }
  const docRef = this.firestore.doc('users/myuserid');
  docRef.get().then(doc => {
    if (doc.exists) {
      console.log("Document data:", doc.data());
      return doc.data;
    } else {
      console.log("No such document!");
    }
  }).catch(error => {
    console.log("Error getting document:", error);
  });
};

Answer 1

调用getUserData函数时，需要在函数结束前返回一个Promise。当您调用docRef.get 时，我假设这是一个异步调用，因此在发生这种情况时，函数结束并返回undefined。当它到达return doc.data 时，为时已晚。

getUserData = userId =>
  new Promise((resolve, reject) => {
    if (!firebase.apps.length) {
      reject();
    }
    docRef.get().then(doc => {
      if (doc.exists) {
        console.log("Document data:", doc.data());
        resolve(doc.data);
      } else {
        console.log("No such document!");
        reject();
      }
    }).catch(error => {
      console.log("Error getting document:", error);
      reject();
    });
  });