创建新React Native应用时出现Uncaught TypeError: initializeApp不是函数错误

错误原因 #

你使用了Firebase兼容版本（compat），但未初始化Firebase应用，所有Firebase功能都需要先完成初始化才能调用；另外需确认Firebase依赖安装正确。

解决方案 #

1. 确认Firebase兼容版本安装正确 #

如果未安装或版本不匹配，执行以下命令：

npm install firebase@^9.23.0
# 或使用yarn：yarn add firebase@^9.23.0

2. 添加Firebase初始化代码 #

所有Firebase功能调用前，必须先通过项目配置初始化应用。修改你的LoadingScreen代码如下：

import { ActivityIndicator, StyleSheet, View } from 'react-native'
import React from 'react';
import * as firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database';

// 从你的Firebase控制台复制项目配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

// 仅初始化一次应用，避免重复初始化报错
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

class LoadingScreen extends React.Component {

    componentDidMount() { 
        this.checkIfLoggedIn();
    };


    checkIfLoggedIn = () => {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.props.navigation.navigate('DashboardScreen')
            } else {
                this.props.navigation.navigate('LoginScreen')
            };
        });
    };


    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator size="large" />
            </View>
        )
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

export default LoadingScreen;

3. 关键注意事项 #

• firebaseConfig的内容必须从你自己的Firebase项目控制台获取，不能直接使用示例占位符
• 初始化代码只需执行一次，推荐将Firebase配置和初始化逻辑放到单独文件（如firebase.js）中，再在需要的组件中导入，避免重复初始化
• 你当前使用的是Firebase兼容版本（compat），上述写法适配该版本；若后续切换到Firebase 9+模块化版本，写法会有差异

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