在Next.js中用环境变量初始化Firebase，避免重复应用错误

这个错误的核心原因是多次调用initializeApp()初始化默认Firebase应用——Next.js开发环境的热重载会导致代码重复执行，或是项目中多个文件各自尝试初始化默认应用，最终引发配置冲突。

修正步骤： #

1. 调整环境变量命名

Next.js中，客户端可访问的环境变量必须以NEXT_PUBLIC_为前缀，修改你的.env.local文件：

NEXT_PUBLIC_APIKEY=你的实际apiKey
NEXT_PUBLIC_AUTHDOMAIN=你的实际authDomain
NEXT_PUBLIC_PROJECTID=你的实际projectId
NEXT_PUBLIC_STORAGEBUCKET=你的实际storageBucket
NEXT_PUBLIC_MESSAGINGSENDERID=你的实际messagingSenderId
NEXT_PUBLIC_APPID=你的实际appId

2. 创建统一的Firebase配置文件

在项目根目录（或lib文件夹）新建firebase.js，加入以下代码：

import { initializeApp, getApps, getApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_APIKEY,
  authDomain: process.env.NEXT_PUBLIC_AUTHDOMAIN,
  projectId: process.env.NEXT_PUBLIC_PROJECTID,
  storageBucket: process.env.NEXT_PUBLIC_STORAGEBUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGINGSENDERID,
  appId: process.env.NEXT_PUBLIC_APPID
};

// 关键：先检查是否已存在默认应用，不存在才初始化
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();
// 初始化Firestore实例
const db = getFirestore(app);

export { app, db };

3. 在项目中统一使用导出的实例

在需要操作Firestore的组件或页面中，直接导入db即可，示例：

import { db } from "../firebase";
import { collection, getDocs } from "firebase/firestore";

async function fetchData() {
  const snapshot = await getDocs(collection(db, "your-collection-name"));
  snapshot.forEach(doc => {
    console.log(doc.id, doc.data());
  });
}

额外注意事项 #

• 不要在多个文件中单独初始化Firebase，所有需要使用的地方都从firebase.js导入实例
• 如果需要初始化多个Firebase应用（比如关联不同项目），可以指定应用名称：initializeApp(firebaseConfig, "custom-app-name")，后续通过getApp("custom-app-name")获取对应实例

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