Firebase V10配置报错：模块无default导出，求正确配置方法

你遇到的错误是因为Firebase V9及后续版本（包括V10）采用了模块化API设计，不再支持旧版的命名空间式默认导入（import firebase from 'firebase/app'），必须使用新的模块化导入方式。

以下是修正后的完整配置代码：

// 导入Firebase核心函数及所需服务
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore, serverTimestamp } from 'firebase/firestore';

// Firebase配置信息
const firebaseConfig = {
  apiKey: "AIzaSyCx2yjPuTi4nSWVrnXHg3KibdcwQ2HJqyY",
  authDomain: "instagram-yt-d1e1e.firebaseapp.com",
  projectId: "instagram-yt-d1e1e",
  storageBucket: "instagram-yt-d1e1e.appspot.com",
  messagingSenderId: "743305877307",
  appId: "1:743305877307:web:f152c6e75ab60b7b87c91e"
};

// 初始化Firebase App
const app = initializeApp(firebaseConfig);

// 获取Auth和Firestore实例
const auth = getAuth(app);
const db = getFirestore(app);

// 导出所需服务和工具
// eslint-disable-next-line react-refresh/only-export-components
export { auth, db, serverTimestamp as FieldValue };

关键改动说明： #

• 替换旧的命名空间导入为按需导入具体函数，比如initializeApp、getAuth、getFirestore
• 用getAuth(app)和getFirestore(app)替代旧的firebase.auth()、firebase.firestore()调用方式
• serverTimestamp直接从firebase/firestore导入，替代旧的firebase.firestore.FieldValue.serverTimestamp

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