Firestore Emulator不显示数据问题求助

针对你遇到的「Firestore模拟器能收到请求但Data栏为空」的问题，按以下步骤逐一排查：

1. 核对项目ID一致性 #

你启动模拟器的命令是firebase emulators:start --project=demo-project，但代码中初始化Firebase使用的是process.env.REACT_APP_PROJECTID环境变量。必须确保该变量的值完全等于demo-project。

Firestore模拟器会按项目ID隔离数据存储，若代码中的项目ID与启动命令不匹配，数据会写入对应项目ID的模拟器实例中，当前打开的模拟器UI（对应demo-project）自然无法读取到数据。

2. 确认写入操作已完成 #

Firestore的写入是异步操作，若调用addDoc/setDoc时未用await处理Promise，可能出现代码执行结束但写入未完成的情况。示例：

// 错误写法：未等待写入完成
addDoc(collection(db, "users"), {name: "test"})

// 正确写法：通过await确保写入完成
await addDoc(collection(db, "users"), {name: "test"})

即便模拟器能捕获请求，未完成的写入也不会落盘显示。

3. 检查Firestore安全规则 #

默认情况下模拟器允许所有读写操作，但如果修改过firestore.rules，可能规则拒绝了写入。可临时将规则改为全开放测试：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

修改后重启模拟器，验证数据是否能正常显示。

4. 清理模拟器数据与缓存 #

• 停止模拟器，删除本地模拟器数据目录（默认路径为~/.cache/firebase/emulators），再重新启动模拟器。
• 清空浏览器缓存或使用无痕模式打开应用，避免旧连接缓存干扰。

5. 验证Firestore模拟器连接状态 #

在代码中添加日志，确认模拟器连接配置正确：

if (hostname === "localhost") {
  connectAuthEmulator(auth, "http://localhost:9099");
  console.log("连接Firestore模拟器中");
  connectFirestoreEmulator(db, "localhost", 8080);
  // 打印连接配置确认
  console.log("Firestore模拟器连接地址:", db._settings.host);
  connectStorageEmulator(storage, "localhost", 9199);
  connectFunctionsEmulator(functions, "localhost", 5001);
}

查看控制台输出，确认连接地址为localhost:8080。

6. 排查SDK版本兼容性 #

若近期更新过Firebase SDK，可能存在版本兼容问题。可尝试回退到之前能正常工作的版本，或升级至最新稳定版测试。

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