Firebase firestore onSnapshot - 使用承诺在初始数据查询后获取实时更新

Question

为了显示加载进度，我试图在初始获取时将 onSnapshot 调用包装在一个 promise 中。数据加载正确，但实时更新无法正常运行。

有没有办法使用 onSnapshot 方法实现这种类型的功能？

这是我的初始数据抓取。在实现承诺包装器之前，实时更新功能正常：

const [heroesArr, setHeroesArr] = useState([]);
const db = firebase.firestore();
const dbError = firebase.firestore.FirestoreError;

useEffect(() => {
    const promise = new Promise((resolve, reject) => {
      db.collection("characterOptions")
        .orderBy("votes", "desc")
        .onSnapshot(coll => {
          const newHeroes = [];
          coll.forEach(doc => {
            const {
              name,
              votes
            } = doc.data();
            newHeroes.push({
              key: doc.id,
              name,
              votes
            });
          });
          if(dbError) {
             reject(dbError.message)
             } else {
             resolve(newHeroes);
            }
        });
    });
    promise
      .then(result => {
        setHeroesArr(result);
      })
      .catch(err => {
        alert(err);
      });
  }, [db]);

同样，数据正在加载到 DOM，但实时更新无法正常运行。

Answer 1

onSnapshot 与承诺并不真正兼容。onSnapshot 侦听器无限期地侦听，直到您删除侦听器。Promises 在工作完成时解决一次且仅一次。将 onSnapshot（直到你说它才结束）与承诺结合起来是没有意义的，承诺在工作绝对完成时解决。

如果您只想获取一次查询的内容，只需get()而不是 onSnapshot。当所有数据都可用时，这将返回一个承诺。有关更多详细信息，请参阅文档。