React Native集成Cloud Firestore时出现WebChannel传输错误求助

我正在开发一款React Native应用，尝试将数据存储到Cloud Firestore中。严格按照文档配置Firestore后仍出现错误，但项目里已集成的Firebase Google Auth和Phone Auth功能运行正常。

配置代码（config.js） #

import {initializeApp} from 'firebase/app';
import { getFirestore } from "firebase/firestore";

var firebaseConfig = {
  apiKey: '***********',
  authDomain: '***********',
  databaseURL: '************',
  projectId: '*********',
  storageBucket: '***********',
  messagingSenderId: '**********',
  appId: '*******************',
  measurementId: 'G-measurement-id',
};

/* if (!firebase.apps.length) { */
    const app = initializeApp(firebaseConfig);
    // Initialize Cloud Firestore and get a reference to the service
    export const db = getFirestore(app);

导入方式 #

import { collection, addDoc } from "firebase/firestore"; 
import { db } from '../components/config';

写入数据的代码 #

try {
        console.log("I tried to add data to the database")
        const docRef = await addDoc(collection(db, "users"), {
          first: "Ada",
          last: "Lovelace",
          born: 1815
        });
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }

收到的错误信息（已翻译） #

[2023-01-04T10:11:40.422Z] @firebase/firestore: Firestore (9.15.0): WebChannel连接传输出错: {"defaultPrevented": false, "g": {"A": true, "J": null, "R": [循环引用], "g": {"$": true, "$a": 5000, "A": 3, "B": null, "C": 0, "Ca": "FNfAYYs2MaCorbMq6Mf1R9j8iPOgyaJ7pQhysEk5dtQ", "D": "gsessionid", "Ea": -1, "F": [U], "Fa": 12, "G": 0, "Ga": false, "H": true, "Ia": [ud], "J": "nFh02neRvgNxOoZ0mmVvKQ", "K": 45000, "L": false, "M": true, "O": true, "P": false, "R": 0, "U": [对象], "V": 0, "W": 93697, "Y": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "aa": 4, "ab": false, "ba": false, "bb": false, "cb": 2, "eb": 1, "fb": 10000, "g": null, "h": [pd], "i": [数组], "j": [Sb], "l": [Z], "la": [对象], "m": null, "ma": undefined, "na": "", "o": null, "oa": null, "pa": 8, "s": null, "sa": -1, "u": null, "ua": undefined, "v": null, "va": [U], "wa": 600000}, "h": {"database": "projects/cabshare-44794/databases/[object Object]"}, "i": {"g": [对象], "h": 4, "src": [循环引用]}, "j": {"g": [循环引用]}, "l": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "o": undefined, "s": false, "v": true}, "status": 1, "target": {"A": true, "J": null, "R": [循环引用], "g": {"$": true, "$a": 5000, "A": 3, "B": null, "C": 0, "Ca": "FNfAYYs2MaCorbMq6Mf1R9j8iPOgyaJ7pQhysEk5dtQ", "D": "gsessionid", "Ea": -1, "F": [U], "Fa": 12, "G": 0, "Ga": false, "H": true, "Ia": [ud], "J": "nFh02neRvgNxOoZ0mmVvKQ", "K": 45000, "L": false, "M": true, "O": true, "P": false, "R": 0, "U": [对象], "V": 0, "W": 93697, "Y": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "aa": 4, "ab": false, "ba": false, "bb": false, "cb": 2, "eb": 1, "fb": 10000, "g": null, "h": [pd], "i": [数组], "j": [Sb], "l": [Z], "la": [对象], "m": null, "ma": undefined, "na": "", "o": null, "oa": null, "pa": 8, "s": null, "sa": -1, "u": null, "ua": undefined, "v": null, "va": [U], "wa": 600000}, "h": {"database": "projects/cabshare-44794/databases/[object Object]"}, "i": {"g": [对象], "h": 4, "src": [循环引用]}, "j": {"g": [循环引用]}, "l": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "o": undefined, "s": false, "v": true}, "type": "c"}

## 解决方案
从错误信息里的`"database": "projects/cabshare-44794/databases/[object Object]"`能看出数据库路径解析异常，按以下步骤排查修复：

- **修复Firebase初始化逻辑**
  恢复注释掉的App初始化判断，避免重复初始化导致的实例异常：
  ```javascript
  import {initializeApp, getApps, getApp} from 'firebase/app';
  import { getFirestore } from "firebase/firestore";

  var firebaseConfig = {
    // 你的配置信息
  };

  const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
  export const db = getFirestore(app);

• 统一Firebase依赖版本
  确保所有Firebase相关包版本一致，版本不匹配会引发底层连接问题。修改package.json统一版本后重新安装：

  npm install firebase@9.15.0 --save
  

• 临时放宽Firestore安全规则
  调试阶段暂时允许所有读写请求，确认是否是规则拦截了操作（上线前务必改回严格规则）：

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

• 检查网络与权限配置
  Android端确认AndroidManifest.xml添加了网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

  iOS端检查Info.plist是否开启了网络访问权限，同时确保设备网络能正常访问Firebase域名。

• 清除缓存并重建项目

  npx react-native start --reset-cache
  rm -rf node_modules && npm install
  npx react-native run-android # 或 run-ios
  

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