React Native to firestore：Firestore（8.2.1）：连接WebChannel传输错误答案

【问题标题】：React Native to firestore: Firestore (8.2.1): Connection WebChannel transport erroredReact Native to firestore：Firestore（8.2.1）：连接WebChannel传输错误
【发布时间】：2021-04-12 02:28:06
【问题描述】：

我创建了简单的 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 数据库即可。

【问题讨论】：

这似乎非常接近here 上的示例。在我看来，您的数据未正确发送到 Firestore。

标签： reactjs firebase react-native google-cloud-firestore

【解决方案1】：

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

firebase.initializeApp(firebaseConfig);

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

【讨论】：

【解决方案2】：

在实现 Firestore 云功能（触发器）时，我正在使用基于 CRA/React-Admin 的常规应用程序，并且也看到了这个问题。有一段时间，我被关于 related issue 和 this other one 的建议误导了，这些建议正在谈论将 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 函数应该只是说文档路径格式不正确。

【讨论】：

【解决方案3】：

它对我有用：

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

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

【讨论】：

【解决方案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,this%20is%20your%20required%20field.

【讨论】：

【解决方案5】：

TL;DR

尝试experimentalAutoDetectLongPolling 和experimentalForceLongPolling。如果experimentalAutoDetectLongPolling 有效，用它代替experimentalForceLongPolling！

google (https://github.com/firebase/firebase-js-sdk/issues/1674) 创建了一个 RFC，它正在搜索与 experimentalForceLongPolling 和 experimentalAutoDetectLongPolling 相关的可重现案例，以解决与 Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. 错误相关的问题，尽管连接正常。根据experimentalForceLongPolling 设置的文档，错误似乎与某些代理和/或防病毒软件有关：

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

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

不过，使用此选项会导致性能下降。

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

另一个区别是experimentalAutoDetectLongPolling 将来可能会默认启用。 experimentalForceLongPolling 很可能会被弃用。

【讨论】：

【解决方案6】：

在我的情况下，删除它可以解决问题。

const db = firebase.firestore()
db.settings({
    cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED
})
db.enablePersistence()

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

【讨论】：