React Native应用无法连接Firestore模拟器问题求助

这个问题是React Native环境连接本地Firestore模拟器的常见问题，核心原因是运行环境的网络映射、SDK配置规则、Android网络限制三类，按以下步骤操作可解决： #

1. 修正连接地址（根据你的运行环境二选一） #

• 如果你用Android官方模拟器：localhost指向的是模拟器自身的系统，而非你开发电脑的本地服务，必须替换为Android模拟器预留的宿主机桥接地址 10.0.2.2
• 如果你用iOS模拟器 / USB连接的真机 / 同WiFi下的真机：替换为你开发电脑的局域网IP（比如192.168.3.2这类，可在电脑网络设置中查看）

2. 修正Firestore配置 #

注意两个规则：

• 所有模拟器配置必须在第一次调用Firestore实例之前完成，不能先做查询再配置模拟器
• WebChannel报错需要强制开启长轮询配置，适配React Native的网络环境

正确配置代码（兼容你当前使用的命名空间导入方式）： #

import * as firebase from 'firebase';
import 'firebase/firestore';

const firebaseConfig = {
  // 保留你原来的配置不变
  apiKey: "ZZZZ",
  authDomain: "ZZZZ",
  projectId: "ZZZZ",
  storageBucket: "ZZZZ",
  messagingSenderId: "ZZZZ",
  appId: "ZZZ",
  measurementId: "ZZZ"
};

firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

// 模拟器配置 注意顺序必须在所有db操作之前
db.useEmulator("10.0.2.2", 8080); // Android模拟器用这个地址
// db.useEmulator("192.168.3.2", 8080); // iOS/真机替换为电脑局域网IP

// 强制开启长轮询 解决WebChannel报错
db.settings({
  experimentalForceLongPolling: true,
  ssl: false
});

3. 修复Android明文网络限制 #

Android 9及以上系统默认禁止HTTP明文请求，而模拟器连接走的是HTTP协议，需要添加明文权限：
打开你项目里的android/app/src/main/AndroidManifest.xml，在<application>标签添加属性：

<application
  ...
  android:usesCleartextTraffic="true" 
  ...
>

4. 确认Firestore模拟器绑定正确地址 #

启动模拟器时添加host参数，允许外部设备访问：

firebase emulators:start --only firestore --host 0.0.0.0

验证步骤 #

配置完成后先在电脑浏览器访问http://你使用的连接地址:8080，如果能看到Firestore模拟器的欢迎提示，说明服务正常，再启动React Native应用即可正常连接。

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