React项目已安装firebase却提示模块不存在、导入后页面白屏求助

开发者阿泽

2026-10-4

问题排查与修复方案

核心问题：Firebase版本导入语法不兼容

你安装的是Firebase 9.x/10.x 模块化版本，该版本已经移除了import firebase from 'firebase'这类全局默认导出的v8及更早版本的语法，是导致模块找不到、页面白屏的直接原因。

其他次要问题

firebaseConfig配置项中的projectId值前面多了一个多余空格，会触发项目匹配错误
未单独导入Firestore、Auth、Google登录provider对应的模块化API

修复后的代码

1. firebase.js 完整代码

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
    apiKey: "AIzaSyBb9O35r_N--vwBZNfpxY3vZHzi4wH1oII",
    authDomain: "fir-237a1.firebaseapp.com",
    projectId: "fir-237a1", // 已移除值前面的多余空格
    storageBucket: "fir-237a1.appspot.com",
    messagingSenderId: "1055799909510",
    appId: "1:1055799909510:web:c90fad7d5113500585c507"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export { db, auth, provider };

2. SendMail.js 修复代码

import { db } from "./firebase.js"
import { addDoc, collection, serverTimestamp } from "firebase/firestore";
// 已删除不兼容的 import firebase from 'firebase' 写法

function SendMail() {
    const { register, handleSubmit, watch, formState: { errors } } = useForm();
    const dispatch = useDispatch();

    const onSubmit = (formData) => {
        console.log(formData);
        addDoc(collection(db, 'emails'), {
            to: formData.to,
            subject: formData.subject,
            message: formData.message,
            timestamp: serverTimestamp(),
        });

        dispatch(closeSendMessage());
    };
// 后续原有逻辑保持不变
}