Firebase本地连接异常：升级v10.12.2后Firestore无法读写模拟器

核心排查与修复步骤 #

1. 验证Firestore是否连接到本地模拟器 #

在浏览器开发者工具控制台执行以下代码，确认连接地址：

console.log(firestore._settings.host);

若输出不是localhost:8080，说明模拟器未正确连接。检查环境变量判断逻辑，部分React脚手架（如Vite）使用import.meta.env.MODE替代process.env.NODE_ENV，需对应修改：

// 替换原环境判断代码
if (import.meta.env.MODE === 'development') {
  connectAuthEmulator(auth, 'http://localhost:9099');
  connectFirestoreEmulator(firestore, 'localhost', 8080);
  connectStorageEmulator(storage, 'localhost', 9199);
}

2. 清除Firestore本地缓存 #

Firestore会缓存云端数据，切换到模拟器后可能读取旧缓存：

• 打开浏览器开发者工具 → Application → IndexedDB → 删除firebaseLocalStorageDb和firestore相关数据库
• 刷新页面后重新测试

3. 确认Firestore模拟器运行状态 #

确保通过firebase emulators:start正常启动模拟器，终端需输出Firestore Emulator running at http://localhost:8080。若端口被占用，修改firebase.json中的端口配置：

{
  "emulators": {
    "firestore": {
      "port": 8080
    }
  }
}

4. 调试查询条件有效性 #

空数组结果可能是查询条件不匹配，而非连接问题：

• 控制台打印user对象，确认user.uid和user.email为当前登录用户的有效值
• 检查date变量类型，需转换为Firestore认可的Timestamp：

import { Timestamp } from 'firebase/firestore';
const firestoreDate = Timestamp.fromDate(new Date(date));

• 直接在Firestore模拟器UI中执行相同查询，验证是否存在匹配数据

5. 解决WebChannelConnection传输错误 #

控制台的WebChannelConnection RPC 'Write' stream errored警告多为连接异常导致：

• 确认防火墙未阻止8080端口，模拟器启动无报错
• 调试时可在连接模拟器时添加参数屏蔽警告：

connectFirestoreEmulator(firestore, 'localhost', 8080, { disableWarnings: true });

额外验证 #

在初始化代码中添加日志，确认模拟器连接逻辑是否执行：

if (process.env.NODE_ENV === 'development') {
  console.log('连接到Firebase模拟器');
  connectAuthEmulator(auth, 'http://localhost:9099');
  connectFirestoreEmulator(firestore, 'localhost', 8080);
  connectStorageEmulator(storage, 'localhost', 9199);
}

若控制台未输出该日志，说明环境变量判断逻辑失效，需修正配置。

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