Firebase实时更新读取优化：如何避免超出配额？

我使用Firebase Firestore的onSnapshot监听announcements集合以获取实时更新，原本以为快照不会产生读取量，但实际出现了配额超出的情况。当前实现代码如下：

useEffect(() =>
    onSnapshot(collection(db, 'announcements'), async (snapshot) => {
        let oldData = announcementsData;
        let temp = snapshot.docs.map(doc => doc.data());
        // 按id降序排序
        temp.sort((a, b) => {
            return b.id - a.id;
        });

        if (oldData.length !== temp.length && oldData.length !== 0) {
            await schedulePushNotification(temp[0].title, temp[0].description);
        }
        setAnnouncementsData(temp);

    })
, [announcementsData]);

问题根源与优化方案 #

首先纠正误解：Firestore的onSnapshot会产生读取量——初始订阅会读取所有匹配的文档，后续更新快照会读取发生变化的文档。如果订阅逻辑存在重复或不合理的地方，会快速消耗配额。

1. 修复重复订阅问题

你的useEffect依赖项是announcementsData，每次setAnnouncementsData都会重新创建新的快照订阅，导致多个订阅同时运行，重复读取数据。正确的做法是添加订阅清理逻辑，并将依赖项设为空数组，确保只创建一次订阅：

useEffect(() => {
    // 创建订阅并保存取消函数
    const unsubscribe = onSnapshot(collection(db, 'announcements'), async (snapshot) => {
        let temp = snapshot.docs.map(doc => doc.data());
        temp.sort((a, b) => b.id - a.id);

        // 用docChanges检测新增文档
        snapshot.docChanges().forEach(change => {
            if (change.type === 'added') {
                const newAnnouncement = change.doc.data();
                schedulePushNotification(newAnnouncement.title, newAnnouncement.description);
            }
        });

        setAnnouncementsData(temp);
    });

    // 组件卸载或依赖变化时取消订阅
    return () => unsubscribe();
}, []); // 空数组确保仅在组件挂载时创建一次订阅

2. 限制读取的文档数量

如果只需要展示最新的公告，通过查询条件限制返回的文档数，减少初始读取和后续更新的读取量：

// 仅获取最新的10条公告
const q = query(
    collection(db, 'announcements'),
    orderBy('id', 'desc'),
    limit(10)
);

useEffect(() => {
    const unsubscribe = onSnapshot(q, async (snapshot) => {
        // 后续逻辑同上
    });
    return () => unsubscribe();
}, []);

3. 优化更新检测逻辑

原代码通过数组长度判断新增公告的方式不可靠（删除文档也会改变长度），改用snapshot.docChanges()可以精准检测新增、修改、删除的文档，避免不必要的逻辑执行：

snapshot.docChanges().forEach(change => {
    // 仅在新增文档时触发通知
    if (change.type === 'added') {
        const newDoc = change.doc.data();
        schedulePushNotification(newDoc.title, newDoc.description);
    }
});

4. 避免不必要的状态更新

确保只有当数据确实发生变化时才更新状态（onSnapshot本身只会在数据变化时触发，所以这一点结合上述优化即可），避免组件频繁重渲染导致的额外开销。

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