Next.js集成Firebase报firebase未定义ReferenceError错误如何解决

你遇到的报错根源是使用了Firebase 9+ 版本的模块化SDK，却依然沿用v8及之前版本的全局firebase对象调用语法，具体问题和修复方案如下：

问题说明 #

1. Firebase 9+ 版本默认提供tree-shaking友好的模块化API，不存在全局firebase实例，所以代码中firebase.apps、firebase.initializeApp的写法会直接抛出ReferenceError: firebase is not defined错误，该版本也没有firebase的默认导出，所以添加import firebase from "firebase"也无效。
2. 现有导入语法错误：firestore不是v9+的顶级导出，需要用getFirestore方法获取实例。
3. Next.js有SSR/SSG特性，analytics只能在客户端运行，直接调用会导致服务端渲染报错，同时要避免重复初始化Firebase实例。
4. Next.js中需要暴露给客户端的环境变量必须加NEXT_PUBLIC_前缀，否则客户端代码无法读取。

修复后的完整代码 #

import { initializeApp, getApps, getApp } from "firebase/app";
import { getAnalytics, isSupported } from "firebase/analytics";
import { GoogleAuthProvider, getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_BOOSTING_BAZAAR_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_BOOSTING_BAZAAR_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_BOOSTING_BAZAAR_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_BOOSTING_BAZAAR_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_BOOSTING_BAZAAR_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_BOOSTING_BAZAAR_FIREBASE_MEASUREMENT_ID,
};

// 避免重复初始化：存在已初始化实例就复用，否则新建实例
const app = getApps().length ? getApp() : initializeApp(firebaseConfig);

// 仅在客户端环境初始化analytics
let analytics;
if (typeof window !== 'undefined') {
  isSupported().then(supported => supported && (analytics = getAnalytics(app)));
}

// 导出需要使用的服务实例，其他组件直接导入即可，无需重复初始化
const db = getFirestore(app);
const auth = getAuth(app);
const googleProvider = new GoogleAuthProvider();

export { app, analytics, db, auth, googleProvider };

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