基于Firestore的React聊天应用如何降低文档读取次数

你当前代码的核心问题是每次快照触发都全量拉取所有匹配的25条文档，没有用到Firestore的增量更新能力，所以只要查询结果有任何变动都会产生25次读取。你自己发消息时会触发本地写入、服务端同步两次快照回调，就会出现50次读取的情况。可通过以下方案降低读取量：

• 改用快照差异更新，避免全量读取
  用snapshot.docChanges()只处理发生变更的文档，其余已经存在的消息不需要重复读取更新，优化后新增一条消息只会产生1次读取，远低于之前的25次。参考代码：

useEffect(() => {
    const q = query(
        collection(db, 'messages'),
        orderBy('createdAt', 'desc'),
        limit(25)
    );

    return onSnapshot(q, (snapshot) => {
        setData(prevData => {
            const updatedData = [...prevData];
            snapshot.docChanges().forEach(change => {
                if (change.type === 'added') {
                    // 倒序排列的新消息插入到队首
                    updatedData.unshift({...change.doc.data(), id: change.doc.id});
                } else if (change.type === 'modified') {
                    // 替换已更新的对应消息
                    const targetIndex = updatedData.findIndex(msg => msg.id === change.doc.id);
                    targetIndex !== -1 && (updatedData[targetIndex] = {...change.doc.data(), id: change.doc.id});
                } else if (change.type === 'removed') {
                    // 移除已删除的对应消息
                    const targetIndex = updatedData.findIndex(msg => msg.id === change.doc.id);
                    targetIndex !== -1 && updatedData.splice(targetIndex, 1);
                }
            });
            // 维持最多25条的数量限制
            return updatedData.slice(0, 25);
        });
    });
}, []);

• 开启离线持久化缓存
  初始化Firebase时开启IndexedDB持久化，已经读取过的无变更文档会直接从本地缓存返回，不会产生服务端计费读取。参考代码：

import { initializeFirestore, persistentLocalCache } from "firebase/firestore";
import { getApp } from "firebase/app";

const db = initializeFirestore(getApp(), {
  cacheSizeBytes: 10485760, // 可自定义缓存大小，示例为10MB
  localCache: persistentLocalCache()
});
// 旧版本Firebase可使用enableIndexedDbPersistence(db)方法开启

• 拆分监听范围实现懒加载
  不需要一直保持25条消息的全局监听，历史消息等用户滚动到顶部时再分页查询，不需要实时更新的历史消息直接用getDocs一次性拉取即可，不用挂载监听，仅保持最新的10条消息做实时监听，进一步减少快照触发的文档数量。
• 使用聚合文档降低读取次数
  单条消息存一个文档的模式天然读取量偏高，可以按时间/数量维度把多条消息打包存入同一个聚合文档，比如每个文档存20条消息，每次读取1个聚合文档就能拿到20条消息，直接把读取量降到原来的1/20，写入时用事务做追加操作即可。
• 排查重复监听问题
  检查组件挂载逻辑，避免同一个页面重复挂载导致开启多个相同的查询监听，每个监听触发都会单独统计读取次数，会导致读取量无意义翻倍。

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