React Native重复超时将集合写入firestore@firebase/firestore：Firestore（8.4.2）：连接WebChannel传输错误

Posted 2023-02-22

【中文标题】React Native重复超时将集合写入firestore@firebase/firestore：Firestore（8.4.2）：连接WebChannel传输错误

【英文标题】：React Native repeated timeouts writing collection to firestore@firebase/firestore: Firestore (8.4.2): Connection WebChannel transport errored

【发布时间】：2021-07-26 04:54:05

【问题描述】：

我正在尝试将用户从 react 本机应用程序写入 firestore 集合。用户通过身份验证在 firebase 中创建，但随后挂在 firebase.firestore().collection('users').doc(uid).set('data') 上。

几分钟后我收到一条警告：“firestore@firebase/firestore: Firestore (8.4.2): Connection WebChannel transport errored”

我会每隔几分钟继续收到此警告，有时会在 20 分钟左右后将集合写入 firestore。

在 github 和 SO 上有一些关于这个问题的问题，但没有一个可以解决。有人遇到过这个吗？ 我的代码

import '@firebase/auth';
import '@firebase/firestore';

const firebaseConfig = 
    apiKey: "xxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxx",
    projectId: "xxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxx",
    appId: "xxxxxxxxxxxx",
    measurementId: "xxxxxxxxxxxxx"
;

if (!firebase.apps.length) 
    firebase.initializeApp(firebaseConfig);


export  firebase ;


import  StatusBar  from 'expo-status-bar';
import React from 'react';
import  StyleSheet, Text, View, Button  from 'react-native';
import  firebase  from '../src/firebase'

const handleSubmit = (email,password) => 
  console.log(email + password);
  firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((response) => 
          const uid = response.user.uid
          const data = 
              id: uid,
              email
          ;
          const usersRef = firebase.firestore().collection('users')
          usersRef
              .doc(uid)
              .set(data)
              .then(() => 
                  console.log('please get here')
              )
              .catch((error) => 
                console.log('error get here')
              );
      )
      .catch((error) => 
        console.log('outer error get here ' + error)
  );


export default function App() 
  return (
    <View style=styles.container>
      <Button
        onPress=handleSubmit('[e-mail]', 'pass123')
        title='test'
      />
      <StatusBar style="auto" />
    </View>
  );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  ,
);

【参考方案1】：

如果它对任何人有帮助，最近对我有用的修复是

import initializeFirestore from 'firebase/firestore'
const db = initializeFirestore(firebaseApp, useFetchStreams: false)

引用团队的话： “这个问题是由于在新的模块化构建 (v9) 中默认启用了 useFetchStreams 引起的。由于 RN 不完全支持获取可读流，因此项目必须回退到 XHR（这是 v8 中的默认设置）。”

他们还说 RN 的 fetch 修复程序应该在本周发布。

主题在这里： https://github.com/firebase/firebase-js-sdk/issues/5667

【参考方案2】：

所以我在firebase github上问了这个问题，见：https://github.com/firebase/firebase-js-sdk/issues/4859

他们给我的解决方案是在初始化 firebase 时添加以下代码。

firebase.initializeApp(firebaseConfig);
firebase.firestore().settings( experimentalForceLongPolling: true );

【参考方案3】：

您的错误消息表明您使用的是 Firebase SDK v8.4.2。但是，这比 Expo SDK 支持的当前版本更新。

在expo下安装依赖时，一定要通过expo install firebase而不是npm install firebase安装。

为确保您现在安装了正确的版本，请执行以下操作：

npm uninstall firebase expo install firebase

然后尝试再次运行您的应用。

【讨论】：

感谢您的回答！但是我没有使用 expo 来开发应用程序，只是原生反应。

从 'expo-status-bar' 导入 StatusBar ;

抱歉我的代码有点误导，我从我正在开发的一个更大的应用程序中提取了 firebase 代码，并加快设置我使用 create-react-native-app 的示例，它添加了一些博览会代码.该错误发生在 expo 和 vanilla react native 中。我实际上在 github 上得到了答案，请参阅：github.com/firebase/firebase-js-sdk/issues/4859

感谢您的跟进！我不知道我喜欢他们为您提供的答案。你认为什么“代理”在你的环境中起作用？ firebase.google.com/support/release-notes/js#cloud-firestore_72