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

Question

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

错误信息

Unhandled Rejection (TypeError): Cannot read property 'then' of undefined

错误发生在以下行:

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

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

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

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。当它返回 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();
    });
  });