Firebase Firestore onSnapshot无法在ReactJs应用程序上接收更改和渲染

问题描述

我们有一个使用Firebase的ReactJs应用程序。首次注册该应用程序并首次登录时，该应用程序使用onSnapshot方法从Firebase加载文档，并在视图中呈现使用该数据的组件。问题是，当我们对已加载的文档进行更改并将这些更改写回到Firebase时，ReactJs应用程序不会发现这些更改已被应用，因此视图也不会更新。但是，如果我们刷新应用程序，则所做的更改将被呈现，并且将来的更改将像往常一样被接受，一切都很好。

这是我们调用onSnapshot方法的代码。您可以看到我在其中粘贴了一些调试文本，该文本仅在未加载文档时才呈现一次，因此我知道问题在于这不是在Firestore中获取文档更改。

function useHub(hubId) {
  console.debug("useHub");
  const Firebase = React.useContext(FirebaseContext);

  const [loading,setLoading] = React.useState(true);
  const [error,setError] = React.useState(false);
  const [hub,setHub] = React.useState(null);

  React.useEffect(() => {
    console.debug("useHub: useEffect");
    setHub(null);
    console.log('****************************');
    console.log("Hub ID " + hubId);
    if (hubId) {
      const unsubscribe = Firebase.firestore()
        .collection("hubs")
        .doc(hubId)
        .onSnapshot(
          (doc) => {
            const hubDoc = Object.assign({},{ id: doc.id },doc.data());

            console.log('***************************');
              console.log('***************************');
                console.log(hubDoc);
              console.log('***************************');
              console.log('***************************');

            setHub(hubDoc);
            setLoading(false);
            setError(false);
          },(error) => {
            console.error("Error:",error);
            setError(error.message);
            setLoading(false);
          }
        );

      return () => unsubscribe();
    }
  },[Firebase,hubId]);

  return {
    loading,error,hub,};
}

export { useHub };

为什么会发生这种情况？

解决方法

您可以考虑让组件自行更新，这是一种解决方法。我找到了here文档，该文档描述了详细信息。