Firebase/Firestore 9.9.4 WebChannel传输错误及数据读取失败求助

1. 确认Android模拟器的网络地址映射 #

Android模拟器默认将本地主机127.0.0.1映射为10.0.2.2，这是连接本地模拟器的关键：

• 检查Firestore初始化时的host参数必须用10.0.2.2而非localhost/127.0.0.1，示例配置：

  import { initializeApp } from "firebase/app";
  import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
  
  const firebaseApp = initializeApp({
    // 你的Firebase项目配置
  });
  
  const db = getFirestore(firebaseApp);
  if (__DEV__) {
    connectFirestoreEmulator(db, "10.0.2.2", 8080);
    // Auth模拟器也要同步用这个地址
    // connectAuthEmulator(auth, "http://10.0.2.2:9099");
  }
  

• 验证连通性：在模拟器内置浏览器打开http://10.0.2.2:8080，能看到Firestore模拟器欢迎页才算正常；打不开就切换模拟器网络模式到自动或桥接。

2. 强制关闭Firestore离线模式 #

Firestore默认启用离线缓存，若客户端误判离线会直接读缓存，不会发请求到模拟器：

• 初始化后添加强制启用网络的代码：

  import { enableNetwork } from "firebase/firestore";
  
  if (__DEV__) {
    enableNetwork(db).catch(err => console.log("启用网络失败:", err));
    // 开发环境可临时禁用离线缓存
    // db.settings({ persistence: false });
  }
  

• 排查代码中是否有调用过disableNetwork，导致客户端一直处于离线状态。

3. 修正Firestore模拟器的监听配置 #

WebChannel transport errored多数和模拟器的跨域/监听范围有关：

• 启动模拟器时必须加--host=0.0.0.0参数，确保模拟器监听所有网卡，而非仅本地回环：

  firebase emulators:start --project=你的项目ID --host=0.0.0.0
  

• 查看模拟器启动日志，确认Firestore的监听地址是0.0.0.0:8080，如果是127.0.0.1:8080，模拟器根本接收不到Android模拟器的请求。

4. 统一Firebase依赖版本 #

Firebase 9.x版本子包版本不一致会导致兼容性问题，尤其是React Native环境：

• 确保package.json中firebase依赖版本统一，不要单独安装@firebase/firestore之类的子包：

  {
    "dependencies": {
      "firebase": "9.9.4"
    }
  }
  

• 清除React Native缓存，避免旧缓存干扰：

  npx react-native start --reset-cache
  cd android && ./gradlew clean
  

5. 用最简代码验证请求逻辑 #

排除业务代码干扰，用最基础的读取代码测试：

import { collection, getDocs } from "firebase/firestore";
import { useEffect } from "react";

const fetchUsers = async (db) => {
  try {
    const querySnapshot = await getDocs(collection(db, "users"));
    console.log("获取到文档数量:", querySnapshot.size);
    querySnapshot.forEach(doc => {
      console.log(doc.id, " => ", doc.data());
    });
  } catch (e) {
    console.error("读取数据失败: ", e);
  }
};

// 在组件中调用
useEffect(() => {
  fetchUsers(db);
}, []);

• 检查错误捕获逻辑，确保所有报错都能打印出来。

6. 排查模拟器的防火墙/代理设置 #

• 关闭Android模拟器的代理配置（设置→网络→移动网络→代理），避免请求被拦截。
• 确认本地电脑防火墙允许Firebase模拟器的端口（8080、9099）对外访问。

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