React Native应用读取Firebase Firestore数据报错求助

开发React Native简易应用时，尝试从Firebase Firestore读取数据，已配置Firebase初始化文件，但在EventsScreen组件中调用FIREBASE_FIRESTORE.collection('Events')时，出现**"FIREBASE_FIRESTORE.collection不是函数(未定义)"**的错误。已确认Firebase Auth登录功能正常，Firestore依赖包已安装，需排查解决。

相关代码 #

Firebase配置文件 #

import firebase, { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {
  // 你的配置信息
}

const FIREBASE_APP = initializeApp(firebaseConfig)
const FIREBASE_AUTH = getAuth(FIREBASE_APP)
const FIREBASE_FIRESTORE = getFirestore(FIREBASE_APP);

export { FIREBASE_APP, FIREBASE_AUTH, FIREBASE_FIRESTORE}

EventsScreen组件代码 #

import React, { useState, useEffect} from 'react'
import { StyleSheet, Text, View, FlatList, SafeAreaView, ScrollView, Image} from 'react-native'
import { FIREBASE_FIRESTORE, FIREBASE_APP } from '../firebase'

const EventsScreen = () => {

  const headerTitle = 'Events';

  const db = FIREBASE_FIRESTORE.collection('Events')

  return (
    <View style={styles.container}>
        <NavTopBar/>

        <Header title={headerTitle} />

        <SafeAreaView style={styles.content}>
            <ScrollView>
                <View>
                {games.map((game, id) => (
                    <View style={styles.eventCard}>
                        <Text>{game.title}</Text>
                        <View style={styles.eventInfo}>
                            <Image source={getImageSource(game.homeTeam)} style={styles.flag} />
                            <Text>{game.dateStart}</Text>
                            <Image source={getImageSource(game.awayTeam)} style={styles.flag} />

                        </View>
                    </View>
                ))}
                </View>
            </ScrollView>
        </SafeAreaView>
    </View>
  )
}

解决方案 #

你使用的是Firebase v9+模块化API，该版本不再支持旧版的链式调用（如db.collection()），需改用Firebase提供的独立函数操作Firestore：

1. 修改组件的集合调用逻辑
   先导入collection函数，再用它获取集合引用，示例如下：

   import React, { useState, useEffect} from 'react'
   import { StyleSheet, Text, View, FlatList, SafeAreaView, ScrollView, Image} from 'react-native'
   import { FIREBASE_FIRESTORE } from '../firebase'
   // 新增导入collection函数
   import { collection, getDocs } from 'firebase/firestore'
   
   const EventsScreen = () => {
     const headerTitle = 'Events';
     const [games, setGames] = useState([]);
   
     // 改用collection函数获取集合引用
     const eventsCollection = collection(FIREBASE_FIRESTORE, 'Events')
   
     // 读取集合数据示例
     useEffect(() => {
       const fetchEvents = async () => {
         const querySnapshot = await getDocs(eventsCollection);
         const eventsData = querySnapshot.docs.map(doc => ({...doc.data(), id: doc.id}));
         setGames(eventsData);
       }
       fetchEvents();
     }, [])
   
     return (
       // 原渲染代码不变
     )
   }
   

2. 验证依赖版本
   确保package.json中Firebase相关包版本为v9及以上，示例配置：

   "firebase": "^9.23.0",
   "@firebase/firestore": "^9.23.0"
   

3. 注意事项
   Firebase v9+模块化API的所有操作均需使用对应独立函数，比如获取文档用doc()、添加数据用addDoc()、更新数据用updateDoc()等，彻底摒弃旧版链式写法。

内容的提问来源于stack exchange，提问作者Adam Sewell