javascript - 无法将 Firebase 数据库引入应用程序。无法访问 Cloud Firestore 后端。后端在 10 秒内没有响应

问题描述

编辑 - 问题已修复

最后，在收到支持的样本和意见后，经过无数次的测试，我决定取消这个项目，重新开始。我无法说出或解释我做错了什么或如何纠正问题，我只是从头开始了一个项目，一切正常。

我必须说我已经完成了以下问题中显示的所有操作，但无法将数据库中的数据带到我的应用程序中：

@firebase/firestore：Firestore (5.0.4)：无法访问 Cloud Firestore 后端。后端在 10 秒内没有响应

React Native 无法访问 Cloud Firestore 后端

Ionic 5 模拟器 AVD 互联网连接 - 错误？

Firebase/Firestore 未连接到互联网

Firebase Firestore 和身份验证错误

模拟 firstore：Firestore (8.5.0)：无法访问 Cloud Firestore 后端

我更改了 Firebase 的版本，添加了适用于其他人的代码，我在 GitHub 上寻找解决方案等。我也在这个站点上寻找解决方案，但我无法连接。

我的 React Native App 使用了 Firebase。我正在尝试将 Firestore 数据库加入我的应用程序，但没有成功。到目前为止，该应用程序有一个数据库中的产品列表，手动输入，来自一个 Web 应用程序，该应用程序完美连接到 Firebase 数据库制作调试器，我检查修复是否到达我，感谢 console.log，但它是空的，在数据库中我手动输入了几个元素。

我显示来自 console.log 的图像

我总是得到同样的警告：

>  @ firebase / firestore: Firestore (7.19.0): Could not reach Cloud
> Firestore backend. Backend didn't respond within 10 seconds. This
> typically indicates that your device does not have a healthy Internet
> connection at the moment. The client will operate in offline mode
> until it is able to successfully connect to the backend

他们已经是 10 天的测试解决方案。我已经更改了 Firebase 的版本，我添加了适用于其他人的代码，我已经在 GitHub 上寻找答案等。我还在这个网站上寻找了解决方案，但我无法连接。

如果我无法从数据库中获取数据，我将无法继续使用我的应用程序

我显示图像和代码

import app from 'firebase/app'
import 'firebase/firestore'

import firebaseConfig from './config'

class Firebase {
    /*constructor() {
        if(!app.apps.length) {
            app.initializeApp(firebaseConfig)
        }

        this.db = app.firestore()
    }*/

    constructor() {
        if (!app.apps.length) {
            
            app.initializeApp(firebaseConfig)
            app.firestore().settings({ experimentalForceLongPolling: true })
            
        }

        this.db = app.firestore()
    }
}

const firebase = new Firebase()
export default firebase

文件菜单.js

import React, { useContext, useEffect, Fragment } from 'react'
import { StyleSheet } from 'react-native'
import {
    Container,
    Separator,
    Content,
    List,
    ListItem,
    Thumbnail,
    Text,
    Body
} from 'native-base'
import globalStyles from '../styles/global'
import FirebaseContext from '../context/firebase/firebaseContext'

const Menu = () => {

    // Context de Firebase 
    const { menu, obtenerProductos } = useContext(FirebaseContext)

    useEffect(() => {
        obtenerProductos()

        console.log(menu)
    }, [])

    return (
        <Container style={globalStyles.contenedor}>
            <Content style={{ backgroundColor: '#FFF' }}>
                <List>
                    {menu.map(plato => {
                        const { imagen, nombre, descripcion, categoria, precio, id } = plato

                        return (
                            <Fragment key={id}>
                                <ListItem

                                >
                                    <Body>
                                        <Text>{nombre}</Text>
                                    </Body>
                                </ListItem>
                            </Fragment>
                        )
                    })}
                </List>
            </Content>
        </Container>
    )
}

const styles = StyleSheet.create({
    separador: {
        backgroundColor: '#000',
    },
    separadorTexto: {
        color: '#FFDA00',
        fontWeight: 'bold',
        textTransform: 'uppercase'
    }
})

export default Menu

文件 NuevaOrden.js

import React from 'react'
import { View, StyleSheet } from 'react-native'
import { Container, Button, Text, NativeBaseProvider } from 'native-base'
import globalStyles from '../styles/global'
import { useNavigation } from '@react-navigation/native'

const NuevaOrden = () => {

    const navigation = useNavigation()

    return (
        <Container style={globalStyles.contenedor}>
            <View style={[globalStyles.contenido, styles.contenido]}>
                <Button
                    style={globalStyles.boton}
                    rounded
                    block
                    onPress={() => navigation.navigate('Menu')}
                >
                    <Text style={globalStyles.botonTexto} >Crear Nueva Orden</Text>
                </Button>
            </View>
        </Container>
    )
}

const styles = StyleSheet.create({
    contenido: {
        flexDirection: 'column',
        justifyContent: 'center'
    }
})

export default NuevaOrden

文件 firebaseState.js

import React, { useReducer } from 'react'
import firebase from '../../firebase'
import FirebaseReducer from './firebaseReducer'
import FirebaseContext from './firebaseContext'

import { OBTENER_PRODUCTOS_EXITO } from '../../types'

const FirebaseState = props => {

  // Crear state inicial
  const initialState = {
    menu: []
  }

  // useReducer con dispatch  para ejecutar las funciones
  const [state, dispatch] = useReducer(FirebaseReducer, initialState)

  // Función que se ejecuta para traer los productos
  const obtenerProductos = () => {

    // consultar firebase
    //firebase.db.settings({ experimentalForceLongPolling: true })
    firebase.db
      .collection('productos')
      .where('existencia', '==', true) // traer solo los que esten en existencia
      .onSnapshot(manejarSnapshot)
      
    function manejarSnapshot(snapshot) {
      let platos = snapshot.docs.map(doc => {
        return {
          id: doc.id,
          ...doc.data()
        }
      })

      console.log(platos)

      // Tenemos resultados de la base de datos
      dispatch({
        type: OBTENER_PRODUCTOS_EXITO,
        payload: platos
      })    
    }
  }

  return (
    <FirebaseContext.Provider
      value={{
        menu: state.menu,
        firebase,
        obtenerProductos
      }}
    >
      {props.children}
    </FirebaseContext.Provider>
  )
}

export default FirebaseState

在此处输入图像描述

标签： javascriptfirebasereact-nativegoogle-cloud-firestore

javascript - 无法将 Firebase 数据库引入应用程序。无法访问 Cloud Firestore 后端。后端在 10 秒内没有响应

问题描述

解决方案

推荐阅读