React Native中_firestore.default.initializeApp非函数问题求助

我的应用运行时出现错误提示 _firestore.default.initializeApp is not a function，涉及文件包括src/screens/Login.js、src/appNavigator.js和App.js。我已经配置了firebaseConfig并完成Firebase连接，package.json中也已正确添加所有依赖，求解决方法。

Login.js 代码 #

import { View, Text, StyleSheet, TextInput, TouchableOpacity } from "react-native";

import React, { useEffect } from "react";

import firebase from "@react-native-firebase/firestore"

const firebaseConfig = {
    ...
  };

  firebase.initializeApp(firebaseConfig);

const Login = ({navigation}) => {
    useEffect(() => {
        firebase.firestore()
            .collection("admin")
            .add()({
                email: "admin@gmail.com",
                password: "admin@1234"
            })
            .then(() => {
                console.log("Admin added!")
            })
    }, [])
    return (
        <View style={styles.container}>
            <Text style={styles.title}>Admin Login</Text>
            <TextInput style={styles.inputStyle} placeholder={"Enter Email Id"} />
            <TextInput style={styles.inputStyle} placeholder={"Enter Password"} />
            <TouchableOpacity style={styles.loginBtn}>
                <Text style={styles.btnText}>Login</Text>
            </TouchableOpacity>

        </View>
    )
}

export default Login;

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    title: {
        fontSize: 20,
        fontWeight: "800",
        color: "#000",
        marginTop: 100,
        alignSelf: "center"
    },
    inputStyle: {
        paddingLeft: 20,
        height: 50,
        alignSelf: "center",
        marginTop: 30,
        borderWidth: 0.5,
        borderRadius: 10,
        width: "90%"
    },
    loginBtn: {
        backgroundColor: "orange",
        width: "90%",
        height: 50,
        alignSelf: "center",
        height: 50,
        borderRadius: 10,
        marginTop: 50,
        justifyContent: "center",
        alignItems: "center"
    },
    btnText: {
        fontSize: 18,
        fontWeight: '600',
        color: "black"
    }
})

App.js 代码 #

import {View, Text} from "react-native";

import React from "react";

 import AppNavigator from "./src/appNavigator";

  const App = () => {
    return <AppNavigator />
}

export default App;

错误原因及修复方案 #

1. 核心错误：initializeApp是Firebase核心模块的方法，你直接导入的@react-native-firebase/firestore只包含Firestore相关功能，没有初始化方法。

2. 具体修复步骤：

   • 安装Firebase核心模块（如果未安装）：

     npm install @react-native-firebase/app
     # 或 yarn add @react-native-firebase/app
     

   • 修改Login.js的导入与初始化逻辑：

     import { View, Text, StyleSheet, TextInput, TouchableOpacity } from "react-native";
     import React, { useEffect } from "react";
     // 导入Firebase核心模块
     import firebase from "@react-native-firebase/app";
     // 单独导入Firestore模块
     import firestore from "@react-native-firebase/firestore";
     
     const firebaseConfig = {
         // 你的配置内容
     };
     
     // 避免重复初始化
     if (!firebase.apps.length) {
         firebase.initializeApp(firebaseConfig);
     }
     
     const Login = ({navigation}) => {
         useEffect(() => {
             firestore()
                 .collection("admin")
                 .add({ // 修复原代码的.add()({})语法错误
                     email: "admin@gmail.com",
                     password: "admin@1234"
                 })
                 .then(() => {
                     console.log("Admin added!")
                 })
                 .catch(err => console.error("添加数据失败：", err)) // 新增错误捕获
         }, [])
         // 其余组件代码不变
     }
     

   • 推荐优化：将Firebase初始化移到全局配置文件
     新建src/config/firebase.js：

     import firebase from "@react-native-firebase/app";
     import firestore from "@react-native-firebase/firestore";
     
     const firebaseConfig = {
         // 你的配置
     };
     
     if (!firebase.apps.length) {
         firebase.initializeApp(firebaseConfig);
     }
     
     export { firebase, firestore };
     

     之后在Login.js中导入使用：

     import { firestore } from '../config/firebase';
     

3. 额外修复：原代码中.add()({})是语法错误，必须改为.add({})，否则会导致数据添加失败。

内容的提问来源于stack exchange，提问作者Subhrajyoti Mahato