React Native项目Firebase initializeApp不是函数错误求助

一、解决 TypeError: (0, _app.initializeApp) is not a function 错误 #

这个问题通常和Firebase版本不兼容、导入方式错误或缓存残留有关，按以下步骤排查：

1. 统一Firebase版本并修正导入方式 #

• 打开package.json，确认firebase版本：
  • 若为v9+（模块化版本），config.js必须使用模块化导入：

    // config.js (Firebase v9+)
    import { initializeApp } from "firebase/app";
    import { getDatabase } from "firebase/database";
    
    const firebaseConfig = {
      // 你的Firebase配置信息
    };
    
    // 仅初始化一次应用
    const app = initializeApp(firebaseConfig);
    // 获取实时数据库实例
    const database = getDatabase(app);
    
    export { database };
    

  • 若为v8及以下（命名空间版本），导入方式需改为：

    // config.js (Firebase v8)
    import firebase from 'firebase/app';
    import 'firebase/database';
    
    const firebaseConfig = {
      // 你的Firebase配置信息
    };
    
    // 避免重复初始化
    if (!firebase.apps.length) {
      firebase.initializeApp(firebaseConfig);
    }
    
    const database = firebase.database();
    export { database };
    

• 确保项目中所有Firebase相关代码的导入方式和版本匹配，不要混用不同版本的语法。

2. 清理React Native缓存 #

残留的metro缓存可能导致旧代码生效，执行以下命令：

npx react-native start --reset-cache

若问题仍存在，清理依赖缓存后重新安装：

rm -rf node_modules package-lock.json
npm install

3. 检查残留的导航配置 #

即使移除了drawer navigator依赖，也要检查App.js或导航配置文件，确保没有残留的导航相关导入或代码，避免干扰Firebase初始化流程。

二、解决 getData 未定义错误 #

这个问题通常是函数未正确定义、导出或导入导致的，按以下步骤处理：

1. 确保getData函数正确定义并导出 #

在createScreen.js中，基于Firebase版本编写getData函数并导出：

• Firebase v9+版本：

  // createScreen.js
  import { database } from './config';
  import { ref, onValue } from "firebase/database";
  
  // 定义并导出getData函数
  export const getData = () => {
    const dataRef = ref(database, '你的数据节点路径');
    onValue(dataRef, (snapshot) => {
      const data = snapshot.val();
      // 处理获取到的数据
      console.log(data);
    });
  };
  

• Firebase v8版本：

  // createScreen.js
  import { database } from './config';
  
  export const getData = () => {
    database.ref('你的数据节点路径').on('value', (snapshot) => {
      const data = snapshot.val();
      // 处理获取到的数据
      console.log(data);
    });
  };
  

2. 正确导入并调用getData #

在需要使用getData的组件中，确保正确导入：

import { getData } from './createScreen';

// 在组件合适的生命周期或事件中调用
useEffect(() => {
  getData();
}, []);

3. 检查拼写与作用域 #

• 确认函数名拼写一致（注意大小写）；
• 确保getData函数不在局部作用域内（比如嵌套在其他未导出的函数中）。

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