React Native 到 firestore：Firestore (8.2.1)：连接 WebChannel 传输错误

Question

我创建了简单的 React Native 屏幕，可以将数据存储到 firestore。我已经尝试过下面的代码，但它不起作用，而不是抛出一些错误。有人可以帮我吗？

我的代码：

App.js

import React, { Component } from 'react';
import {StyleSheet,Text,View,TextInput,Button,TouchableHighlight} from 'react-native';

import firebase from 'firebase';
import firestore from '@react-native-firebase/firestore';

const firebaseConfig = {
  apiKey: "*********************",
  authDomain: "test-c78ec.firebaseapp.com",
  projectId: "test-c78ec",
  storageBucket: "test-c78ec.appspot.com",
  messagingSenderId: "106189113329",
  appId: "1:106189113329:web:4bf80ec51eba69ab042650",
  measurementId: "G-875ZSQLZS4"
};
firebase.initializeApp(firebaseConfig);

 export default class App extend components{

check2(){
  console.log("level strarted");
  firebase
  .firestore()
  .collection("MyCollection")
  .doc("mydoc")
  .set({
    key: "2",
    value: "World",
  })
  .then((ref) => { console.log(ref);
    console.log("sucessssssssssssssss")
   });
}

render(){
 return(
  <View>
    <TouchableHighlight style={[styles.buttonContainer, styles.loginButton]} onPress={() =>    this.check2('login')}>
          <Text style={styles.loginText}>Store data</Text>
        </TouchableHighlight>
   </View>
  );
 }
}

错误

    WARN     [2021-01-06T10:27:51.153Z]  @firebase/firestore: Firestore (8.2.1): Connection WebChannel transport errored: {"a": {"C": null, "K": [Circular], "a": {"A": 0, "B": [U], "C": true, "F": 45000, "G": false, "I": true, 
"J": -1, "K": "IKeNE9pC779MSM5Rj_dnMg", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 45498, "Ta": 1, "U": true, "Ua": 10000, "V": 4, "X": false, "Y": [Object], "a": null, "b": [zd], "c": 
[bc], "f": [Z], "fa": false, "g": [Array], "ga": undefined, "h": null, "ha": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "i": null, "ia": "", "j": null, "ja": 8, "l": null, "m": null, "ma": 12, "na": [U], "o": 3, "oa": 
600000, "pa": "ATXNDTEvJ_SpMuY50LXD23HPyh9-AVCM", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/test-c78ec/databases/(default)"}, "c": {"a": [Object], "b": 4, "src": [Circular]}, "f": {"a": [Circular]}, "i": undefined, "j": false, "l": true, "m": true, "o": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel"}, "defaultPrevented": false, "status": 1, "target": {"C": null, "K": [Circular], "a": {"A": 0, "B": [U], "C": true, "F": 45000, "G": false, "I": true, "J": -1, "K": "IKeNE9pC779MSM5Rj_dnMg", "Ka": 5000, "Ma": false, "Na": false, "Oa": false, "P": 0, "Pa": 2, "Qa": undefined, "R": [Object], "S": 0, "T": 45498, "Ta": 1, "U": true, "Ua": 10000, "V": 4, "X": false, "Y": [Object], "a": null, "b": [zd], "c": [bc], "f": [Z], "fa": false, "g": [Array], "ga": undefined, "h": null, "ha": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel", "i": null, "ia": "", "j": null, "ja": 8, "l": null, "m": null, "ma": 12, "na": [U], "o": 3, "oa": 600000, "pa": "ATXNDTEvJ_SpMuY50LXD23HPyh9-AVCM", "qa": -1, "ra": [Ed], "s": null, "u": 0, "v": "gsessionid"}, "b": {"database": "projects/test-c78ec/databases/(default)"}, "c": {"a": [Object], "b": 4, "src": [Circular]}, "f": {"a": [Circular]}, "i": undefined, "j": false, "l": true, "m": true, "o": "https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel"}, "type": "c"}

预计：

只需将给定数据写入 firestore 数据库即可。

Answer 1

经过很多努力，我得到了该错误的临时解决方案。解决方案是在firebase初始化后添加以下代码即可。我不知道这是正确的解决方案，但现在工作正常。

firebase.initializeApp(firebaseConfig);

firebase.firestore().settings({ experimentalForceLongPolling: true }); //add this..

Answer 2

TL；博士

尝试

experimentalAutoDetectLongPolling

和

experimentalForceLongPolling

。如果

experimentalAutoDetectLongPolling

有效，请使用它而不是

experimentalForceLongPolling

！

---

谷歌创建了一个 RFC（https://github.com/firebase/firebase-js-sdk/issues/1674），它正在搜索与

experimentalForceLongPolling

和

experimentalAutoDetectLongPolling

相关的可重现案例作为修复尽管连接正常，但仍存在与

Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.

错误相关的问题。 根据

experimentalForceLongPolling

设置的文档，错误似乎与某些代理和/或防病毒软件有关：

这可以避免与某些代理、防病毒软件等不兼容的问题，这些软件会错误地无限期地缓冲流量。

但是，启用

experimentalForceLongPolling

可能会导致性能降低，因为尽管不需要，但可能会使用长轮询：

使用此选项会导致一些性能下降。

使用 experimentalAutoDetectLongPolling 时，情况

不是

。顾名思义，它试图区分需要长轮询的情况和不需要长轮询的情况。

另一个区别是

experimentalAutoDetectLongPolling

将来可能会默认启用。

experimentalForceLongPolling

很可能会被弃用。

Answer 3

它对我有用：

//Write this line below of firebase.initializeApp(firebaseConfig)

firebase.firestore().settings({ experimentalForceLongPolling: true });

Answer 4

就我而言，我应该在

中写下

databaseURL

const firebaseConfig = {...}

但我没有……这很关键。

之后，我写下这个，

    const firebaseConfig = {
      databaseURL: 'https://{project-id}.firebaseio.com'
    
      apiKey: ...,
      authDomain: ...,
      projectId: ...,
      storageBucket: ...,
      messagingSenderId: ...,
      appId: ...,
      measurementId: ...,
    };

Firestore 运行良好。

请参考以下链接

https://docs.expo.dev/guides/using-firebase/

https://stackoverflow.com/questions/40168564/where-can-i-find-my-firebase-reference-url-in-firebase-account#:~:text=Go%20to%20Authentication%20Tab%20and ,这个%20是%20您的%20必填%20字段.

Answer 5

将此行添加到

firebase.initializeApp(firebaseConfig)

行下方。

firebase.firestore().settings({ experimentalForceLongPolling: true, merge:true });

Answer 6

我在实现 Firestore 云功能（触发器）时使用常规的 CRA/React-Admin 应用程序，也看到了这个问题。有一段时间，我有点被关于“相关问题”和“另一个问题”的建议误导了，这些问题正在讨论将 experimentalForceLongPolling 标志设置为 true。该解决方法对我不起作用。

相反，我意识到原因是一个简单的问题（更像是我的一个愚蠢的错误）：我的触发器注册了格式不正确的文档路径。也就是说，我有一个如下所示的云函数：

exports.onCreateFruitStand = functions.firestore
.document("vendors/{vendorId}/stands{standId}")
.onCreate(async (change, context) => {
  console.log(`vendors.stands.onCreate: vendors/${context.params.vendorId}/stands/${context.params.standId}`);
  const data = change.data(); // grab the latest data
  ...
});

我的 Firestore 模拟器没有响应创建的任何新文档。关键的实现是需要将文档路径更改为

"vendors/{vendorId}/stands/{standId}"

（注意缺少的 

/

）。从某种意义上说，发送到客户端的错误消息具有误导性，Firestore 函数应该只是说文档路径格式不正确。

就我而言，删除它可以解决问题。

Answer 7

我认为enablePersistence()可能会影响一些网络连接设置、防病毒或防火墙。

如果您使用 Firebase v9，则答案需要调整。如果您像我一样，您会遇到此问题，因为您的应用程序工作正常，直到您尝试使用针对 Firestore 模拟器的 Cypress 测试您的应用程序。解决方案是相同的：使用

experimentalAutoDetectLongPolling

Answer 8

此配置有效：

// You've initialized a Firebase app somewhere...
const app = initializeApp(firebaseConfig);

// WORKS: Enable long polling auto-detection when initializing Firestore
const db = initializeFirestore(app, { experimentalAutoDetectLongPolling: true, });

此配置会生成“连接 WebChannel 传输错误”警告和“最近错误：FirebaseError：[code=unavailable]”错误：

// You've initialized a Firebase app somewhere...
export const app = initializeApp(firebaseConfig);

// SOMETIMES BREAKS: Call getFirestore the way the Firebase docs recommend.
const db = getFirestore(app);

我也遇到了同样的错误。

Answer 9

数据库 ID 很重要。创建Firebase数据库时，如果将其设置为不同的数据库id，将不起作用。我将其保留为（默认）并且它有效。因此，在最初创建数据库时，如果您使用不同的数据库 ID，请不要使用

https://firebase.google.com/docs/reference/js/firestore_.md#getfirestore_cf608e1

。使用

https://firebase.google.com/docs/reference/js/firestore_.md#initializefirestore_fc7d200

。