Firestore集合快照docChanges()新增数据时出现全量旧数据added变更问题

你遇到的现象不是Firestore的设计异常，是代码存在两个典型问题导致的。

Firestore 快照监听的标准行为 #

先明确SDK的固定设计逻辑：

• 监听器首次建立时，第一次回调会返回所有匹配查询的文档，docChanges()返回的所有变更类型都是added——这是预期行为，目的是让你一次性拿到全量数据完成页面初始化。
• 后续回调（也就是数据库发生实际变更后），SDK会自动对比本地缓存的上一次快照与最新数据，docChanges()仅返回实际发生变化的文档：新增文档标记为added，删除的标记为removed，修改的标记为modified，不会重复返回无变化的存量文档。
• SDK在客户端本地自动维护查询快照缓存，后续同步仅传输增量变更，不存在全量拉取导致的效率问题。

代码的核心问题 #

1. 缺少监听器清理逻辑
   你在useEffect内部定义了unsubscribe函数，但没有将其作为清理函数返回给React。在React 18开发环境的StrictMode模式下，useEffect会被自动执行两次，未被清理的第一次监听器会持续在后台运行；当后续新增文档触发同步时，刚重新建立的新监听器会触发首次全量同步，将所有存量文档都标记为added，导致重复的added日志和异常的数据追加。
2. 手动维护闭包数据列表的逻辑冗余且易出错
   你通过闭包变量data手动遍历变更、累加/删除文档来维护列表，但每次快照的snapshot.docs属性已经直接返回了当前查询下的最新全量文档列表，完全不需要手动累加。一旦遇到SDK触发全量重同步（比如网络切换、本地缓存失效），docChanges返回全量added记录时，现有的push逻辑会直接造成数据重复。

替换后的代码如下：

useEffect(() => {
  console.log('SUBSCRIBED');
  const unsubscribe = firebase
    .firestore()
    .collection("projects")
    .onSnapshot((snapshot) => {
      // 直接从快照提取最新全量文档列表，无需手动累加
      const currentProjects = snapshot.docs.map(doc => ({
        id: doc.id,
        ...doc.data()
      } as IFirebaseProject));
      // 直接同步全量列表到状态
      setProjects(currentProjects);
      // 如需对变更做额外日志/交互逻辑，单独遍历变更即可
      const changes = snapshot.docChanges();
      changes.forEach(change => {
        if (change.type === "added") {
          console.log('ADDED', change.doc.data());
        } else if (change.type === "removed") {
          console.log('REMOVED', change.doc.id);
        }
      })
    });
  // 关键：返回清理函数，组件卸载/依赖变更时自动取消旧监听器
  return () => unsubscribe();
}, []);

修正后的效果 #

• 组件挂载时，监听器首次触发会拿到全量存量数据，此时的全量added日志属于正常初始化行为。
• 后续数据库新增单条记录时，docChanges仅返回1条added类型的变更，不会重复输出存量文档的日志；删除记录时仅返回1条removed变更，和预期完全一致。
• 即使遇到SDK全量重同步的场景，直接从docs提取的全量列表也不会出现数据重复的问题。

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