React/Vite集成Firebase报错：DEFAULT应用未初始化

核心原因 #

你遇到的问题大概率是组件中使用Firebase服务时，初始化代码还没执行，或者没有使用已经初始化好的实例，而是重新尝试创建新的服务实例导致的。

具体解决步骤 #

1. 规范firebase-config.ts的写法，直接导出初始化后的服务实例
   不要只初始化App，要在配置文件里直接获取Auth、Firestore等实例并导出，避免组件重复获取：

   // firebase-config.ts
   import { initializeApp } from "firebase/app";
   import { getAuth } from "firebase/auth";
   import { getFirestore } from "firebase/firestore";
   
   // 你的Firebase配置
   const firebaseConfig = {
     apiKey: "你的apiKey",
     authDomain: "你的authDomain",
     projectId: "你的projectId",
     storageBucket: "你的storageBucket",
     messagingSenderId: "你的messagingSenderId",
     appId: "你的appId"
   };
   
   // 初始化App（必须放在模块顶层，确保加载时就执行）
   const app = initializeApp(firebaseConfig);
   
   // 导出已绑定App的Auth和Firestore实例
   export const auth = getAuth(app);
   export const db = getFirestore(app);
   

2. 确保顶层组件提前加载配置文件
   在你的Main组件里，直接导入firebase-config.ts（哪怕不用里面的实例），保证初始化代码在所有业务组件之前执行：

   // Main.tsx
   import './firebase-config'; // 关键：提前加载执行初始化
   import Register from './components/Register';
   
   function Main() {
     return (
       <div>
         <Register />
       </div>
     );
   }
   
   export default Main;
   

3. 业务组件直接使用配置文件导出的实例
   注册组件里不要自己调用getAuth()，而是直接导入配置文件里已经初始化好的auth实例：

   // Register.tsx
   import { auth } from '../firebase-config'; // 导入已初始化的auth
   import { createUserWithEmailAndPassword } from "firebase/auth";
   
   const Register = () => {
     const handleSubmit = async (e: React.FormEvent) => {
       e.preventDefault();
       const email = "test@example.com";
       const password = "123456";
       try {
         await createUserWithEmailAndPassword(auth, email, password);
         console.log("注册成功");
       } catch (err) {
         console.error(err);
       }
     };
   
     return (
       <form onSubmit={handleSubmit}>
         {/* 表单内容 */}
         <button type="submit">注册</button>
       </form>
     );
   };
   
   export default Register;
   

4. 排查初始化时机问题

   • 不要把initializeApp放在useEffect、条件判断或者函数内部，必须放在模块顶层，保证模块加载时就执行初始化。
   • 检查Vite项目的导入顺序，确保所有使用Firebase服务的组件，都在Main组件之后加载（或者Main组件先导入配置文件）。

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