Redux Thunk中Firestore Promise链第二个onSnapshot为何找不到文档

1. onSnapshot 与 Promise 的错误封装逻辑 #

将持续监听类的 onSnapshot 硬封装为一次性 Promise，完全错配了 API 的设计定位：

• onSnapshot 是实时持续监听，注册后不会因为 Promise 已 resolve 自动解绑，只要没手动调用返回的解绑方法，后续每次文档变更都会触发回调，很容易残留旧分类的监听路径，拿到跨分类的旧数据
• 你在第一个 getDoc 函数里用集合查询的 onSnapshot 返回查询快照，没有做空值兜底，如果查询结果为空，解构出的 dataExtracted 直接为 undefined，后续传值给 doc(data.id) 时会触发路径参数错误，直接导致第二个 onSnapshot 拼接出无效路径，自然定位不到目标文档

2. 自增方法的引用错误 #

代码里写的 firebase.increment(1) 是无效调用，Firebase 没有暴露这个顶层方法，正确的引用路径是 firebase.firestore.FieldValue.increment(1)，这个写法运行到 update 环节就会直接抛类型错误，中断整个 Promise 链，根本走不到后续的 onSnapshot 执行环节。

3. 第二个 onSnapshot 的逻辑漏洞 #

• 代码里存在语法笔误：if (doc.exists): 末尾的冒号是 Python 语法，JS 引擎遇到这个写法会直接解析失败
• 你默认 blogQuestionIndex 集合下的文档 ID 和博客 ID 一一对应，如果两个集合的文档创建逻辑没有同源绑定，直接拿博客 ID 当问题集文档 ID 查询，必然触发「文档不存在」的 reject 分支

4. Promise.all 的并行时序错位 #

把文档更新操作和实时监听扔到同一并行链里，时序完全不匹配：更新操作和监听同时触发时，很容易因为 Firestore 的写入延迟，导致监听第一次触发就读到旧值，甚至误判文档不存在。

一次性获取数据的场景优先用 get() 替代硬封装的 onSnapshot；如果确实需要后续实时同步问题集，再把监听逻辑从一次性异步链中拆分，不要强塞进 Promise 流。

// 所有路径在分类切换时动态生成，避免残留旧路径
export const getMainBlog = (category) => async (dispatch) => {
  const blogInCategoryCounter = firebase.db.collection(`categories/${category}/local-blogs`);
  const blogQuestionIndex = firebase.db.collection(`categories/${category}`).collection("blog-question-index");

  try {
    // 第一步：按排序取目标博客，用一次性get()替代硬封装的onSnapshot
    const blogQuerySnapshot = await blogInCategoryCounter
      .orderBy("counterShownAllUsers", "desc")
      .limit(1)
      .get();
    
    // 空值兜底，避免后续解构拿不到值
    if (blogQuerySnapshot.empty) {
      console.log("当前分类下无可用博客");
      return;
    }
    const targetBlogDoc = blogQuerySnapshot.docs[0];
    const targetBlog = {
      id: targetBlogDoc.id,
      ...targetBlogDoc.data()
    };

    // 第二步：并行执行「计数自增更新」和「问题集一次性读取」
    const [, questionIndexSnapshot] = await Promise.all([
      blogInCategoryCounter.doc(targetBlog.id).update({
        counterShownAllUsers: firebase.firestore.FieldValue.increment(1)
      }),
      blogQuestionIndex.doc(targetBlog.id).get()
    ]);

    const questionList = questionIndexSnapshot.exists ? questionIndexSnapshot.data() : {};

    // 同步状态到Redux
    dispatch(loadBlog({
      blogData: targetBlog,
      blogId: targetBlog.id,
      category,
      blogQuestionIndex: questionList
    }));

  } catch (err) {
    console.error("加载主博客流程失败", err);
  }
}

如果需要后续问题集变更时自动同步页面数据，不要把 onSnapshot 包成只 resolve 一次的 Promise：

1. 等上面的一次性初始化流程走完、dispatch 完初始状态后，单独给目标问题集文档注册 onSnapshot 监听
2. 监听触发时单独 dispatch 更新动作
3. 在分类切换、组件卸载时，调用 onSnapshot 返回的解绑函数，避免内存泄漏和跨分类的路径残留

内容的提问来源于stack exchange，提问作者ransh