如何使用Firebase 9初始化React Native及Expo Web应用 修复找不到firebase变量错误

你使用的是Firebase v9及以上的模块化SDK，该版本已经完全废弃了旧版本的全局firebase命名空间写法，你代码中if (!firebase.apps.length)这行直接调用未引入的firebase变量，自然会触发找不到变量的报错，除此之外你的代码还有两处语法问题：

1. 没有引入getAnalytics方法就直接调用
2. 调用getFirestore、getAnalytics时没有传入初始化完成的app实例

修正方案 #

基础版（不需要额外判断重复初始化） #

Firebase v9+的initializeApp方法重复调用仅会打印警告不会触发崩溃，普通场景直接用下面的写法即可：

import { initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

const firebaseConfig = {
  // 替换为你自己的Firebase配置项
};

// 初始化获取app实例
const app = initializeApp(firebaseConfig);
// 传入app实例获取对应服务
const db = getFirestore(app);
const analytics = getAnalytics(app);

可选：避免重复初始化警告 #

如果你的业务场景会多次执行初始化逻辑，可以通过getApps方法判断已存在的实例，避免触发警告：

import { getApps, getApp, initializeApp } from 'firebase/app';
import { getAnalytics } from 'firebase/analytics';
import { getFirestore, collection, getDocs } from 'firebase/firestore';

const firebaseConfig = {
  // 替换为你自己的Firebase配置项
};

const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
const db = getFirestore(app);
const analytics = getAnalytics(app);

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