React应用Firebase实时数据库下载流量异常虚高问题排查

你贴出的数据拉取代码存在语法错误，get()方法的闭合括号位置不对，当前写法把.then()回调错误传入了child()方法的参数列表，修正后的代码如下：

get(child(dbRef, `article`)).then((snapshot) => {
    if (snapshot.exists()) {
        // 数据处理逻辑
    } else {
        console.log("No data available");
    }
}).catch((error) => {
    console.error(error);
});

这个语法错误不会直接导致流量统计异常，实际下载体积和后台统计差3个数量级的问题，按以下优先级排查：

• 核对目标节点的实际存储体积：直接在Firebase控制台导出article节点的完整JSON文件，查看文件实际大小。不要用前端渲染用到的字段体积估算总大小——这类问题十有八九是节点下存了未被前端使用的大体积字段，比如base64格式的封面图、富文本编辑留存的历史版本、冗余备份数据，前端渲染时只提取了标题、摘要、作者等小字段，实际请求拉取了节点下的全量内容。
• 排查前端是否存在循环重复请求：打开浏览器开发者工具的网络面板，筛选Firebase相关请求，统计整个测试周期内的总请求数、总下载流量。React 18严格模式下开发环境会重复执行useEffect逻辑，如果你的数据拉取逻辑写在useEffect中，却没有配置正确的依赖数组、没有做请求去重、组件卸载时没有中断未完成的请求，很容易触发隐式无限循环拉取。你观测到的100KB流量大概率只是首次页面加载的单次请求流量，后台循环触发的请求没有被你统计到。
• 检查是否存在未销毁的持续监听：全局搜索代码中是否对article节点或者它的父节点绑定了onValue、onChildAdded这类长连接持续监听，且组件卸载时没有调用off()方法取消监听。这类持续监听会保持websocket长连接，同步节点的所有后续变更，如果测试过程中存在频繁的数据写入操作，会累计产生极高的流量。另外如果初始化SDK时调用了enablePersistence开启离线持久化，SDK会自动同步所有监听节点的全量变更，不会因为页面切后台就停止同步。
• 校验流量来源：在Firebase控制台的用量统计页，查看产生流量的请求来源IP、User-Agent信息，确认所有流量都来自你的测试客户端。如果数据库安全规则配置过松，比如允许任意未授权匿名用户读取数据，公网的爬虫、漏洞扫描器会持续拉取公开节点的数据，这部分产生的流量会计入你的账号统计。
• 排除初始化配置错误：确认Firebase初始化时填入的数据库URL是你当前使用的实例地址，没有误连其他存储了大体积数据的数据库实例，也没有在全局配置中开启全库同步的相关逻辑。

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