React项目中同时使用Firebase Auth与实时数据库的报错解决

这个错误的核心原因是：你已经用**旧的firebaseConfig（不含databaseURL）**初始化过默认的Firebase App，之后修改配置再次调用initializeApp时，Firebase检测到配置不一致，就抛出了重复应用的错误。你尝试用getApps但没效果，大概率是写法不对。

修正后的初始化代码 #

把你的Firebase配置文件改成下面的写法，确保只初始化一次App：

import { initializeApp, getApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
// 如需使用数据库，导入对应模块
import { getDatabase } from "firebase/database";

const firebaseConfig = {
    apiKey: '----',
    authDomain: '----',
    projectId: '----',
    databaseURL: '----', // 新增的配置项
    storageBucket: '----',
    messagingSenderId: '----',
    appId: '----',
    measurementId: '----',
};

// 关键逻辑：先检查是否已有初始化的App，无则创建，有则复用
const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApp();

const auth = getAuth(app);
const db = getDatabase(app); // 若需使用数据库则添加

export { auth, db };

额外注意事项 #

• 确保项目中只有这一处调用initializeApp，其他组件/文件都通过导入这里的app实例使用Firebase服务，禁止重复初始化。
• 若使用Next.js这类带热重载的框架，开发环境下代码更新可能触发重复执行，上述判断逻辑已能处理该场景。
• 之前运行过旧配置代码的话，建议清除浏览器缓存或重启开发服务器，避免旧配置缓存干扰。

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