Firestore文档缓存异常及重复从服务器读取问题排查

1. 最初缓存为空的原因 #

Firestore Web SDK默认不启用持久化本地缓存，必须显式配置。你已经通过persistentLocalCache({})完成初始化配置，这一步是正确的，现在缓存能正常工作。

2. 当前问题：数据库仍读取8条文档且输出重复 #

核心问题1：getDocsFromServer调用错误 #

你代码里getDocsFromServer(query, where('timestamp', ">", latestTimestamp))的写法不对。getDocsFromServer只接受一个Query对象作为参数，第二个参数会被直接忽略，导致实际执行的还是原查询（没加时间戳过滤），所以服务器返回了全部8条文档。

正确写法是在原查询上链式调用where构建新的过滤查询：

snapshotDb = await getDocsFromServer(query.where('timestamp', ">", latestTimestamp));

核心问题2：输出重复 #

当前输出出现两次Docs from Cache: 8和Docs from DB:8，说明getDocs函数被调用了两次。检查调用getDocs的业务代码，确认是否存在重复触发的情况（比如组件重复渲染、事件绑定多次等）。

额外验证点：getLatestTimestamp函数正确性 #

确保这个函数能正确提取缓存文档里的最大时间戳：

• Firestore的Timestamp类型支持直接用>/<比较，不用额外转格式
• 参考实现：

function getLatestTimestamp(docs) {
  if (docs.length === 0) return null;
  return docs.reduce((maxTs, doc) => {
    const docTs = doc.data().timestamp;
    return docTs > maxTs ? docTs : maxTs;
  }, docs[0].data().timestamp);
}

修正后的完整代码 #

export const getDocs = async (query) => {
  const docsData = [];
  let snapshotDb = null;
  try {
    const snapshotCache = await getDocsFromCache(query);
    if (!snapshotCache.empty) {
      const latestTimestamp = getLatestTimestamp(snapshotCache.docs);
      // 先加载缓存数据
      snapshotCache.docs.forEach(doc => docsData.push({ id: doc.id, ...doc.data() }));
      console.log('Docs from Cache: ', snapshotCache.docs.length);

      // 构建带时间戳过滤的查询，请求服务器获取更新数据
      const updatedQuery = query.where('timestamp', ">", latestTimestamp);
      snapshotDb = await getDocsFromServer(updatedQuery);
      console.log('Docs from DB: ', snapshotDb.docs.length);

      // 新增服务器返回的更新数据（去重）
      snapshotDb.docs.forEach(doc => {
        if (!docsData.some(d => d.id === doc.id)) {
          docsData.push({ id: doc.id, ...doc.data() });
        }
      });
    } else {
      // 缓存为空时，从服务器获取全部数据
      snapshotDb = await getDocsFromServer(query);
      console.log('Docs from DB: ', snapshotDb.docs.length);
      snapshotDb.docs.forEach(doc => docsData.push({ id: doc.id, ...doc.data() }));
    }
  } catch (error) {
    console.error(error);
  }
  return docsData;
};

// 确保时间戳提取逻辑正确
function getLatestTimestamp(docs) {
  if (docs.length === 0) return null;
  return docs.reduce((maxTimestamp, doc) => {
    const currentTimestamp = doc.data().timestamp;
    return currentTimestamp > maxTimestamp ? currentTimestamp : maxTimestamp;
  }, docs[0].data().timestamp);
}

达成预期输出的关键 #

1. 修正getDocsFromServer的查询构建方式，让时间戳过滤条件生效
2. 确认getLatestTimestamp能正确获取缓存中最新的时间戳
3. 排查getDocs函数的重复调用问题，避免重复输出

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