Next.js集成Firebase遇FirebaseError问题求助

错误核心原因 #

1. 混用Firebase v9模块化写法与compat兼容写法，导致初始化逻辑冲突
2. 调用getAuth()时未传入已初始化的Firebase App实例，Firebase无法读取配置信息
3. Firestore初始化时同样未关联App实例，存在潜在问题

分步解决方案 #

1. 统一Firebase初始化逻辑（使用v9模块化写法） #

修改config.js，确保完整配置并正确关联App实例：

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

// 替换为你的完整Firebase配置，不能省略
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID",
  measurementId: "你的MEASUREMENT_ID" // 可选
};

// 初始化Firebase App
const app = initializeApp(firebaseConfig);
// 关联App实例初始化Auth和Firestore
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

2. 修正Auth工具类代码 #

修改auth.js，直接导入已初始化的Auth实例，避免重复调用getAuth()：

// 移除compat导入，直接使用config中初始化好的auth
import { auth } from './config'; // 注意路径要与你的config.js匹配
import { 
  signOut,
  onAuthStateChanged,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword  
} from "firebase/auth";

const registrerWithEmail = async (email, password) => {
    return createUserWithEmailAndPassword(auth, email, password).then((userCredential) => { 
        const user = userCredential.user;  
        return { user }
    }).catch((error) => { 
        return { 
            error: `${error.code}: ${error.message}`
        }
    })
}

const signWithEmail = async (signInEmail, signInPassword) => { 
    return signInWithEmailAndPassword(auth, signInEmail, signInPassword)
    .then((userCredential) => {  
        const user = userCredential.user; 
        return { user }
    }).catch((error) => {
        console.log('Error: ', `${error.code}: ${error.message}`) 
        return { 
            error: `${error.code}: ${error.message}`
        }
    })
}

const signOutUser = async () => {  
    return signOut(auth).then(() => { 
        return {
            success: true // 修正拼写错误：suscess → success
        }
      }).catch((error) => { 
        return {
          error
        }
      })
}

// onAuthStateChanged是监听方法，无需async
const authState = (userFnc) => { 
    onAuthStateChanged(auth, userFnc); 
}

const getCurrentUser = () => { 
    return auth.currentUser 
 }

export default { 
    registrerWithEmail,
    signWithEmail,
    signOutUser,
    getCurrentUser,
    authState
}

3. 环境变量配置检查（可选） #

如果使用.env文件存储Firebase配置，需确保：

• 变量名以NEXT_PUBLIC_开头（Next.js仅暴露带该前缀的客户端环境变量）
• config.js中正确读取变量：

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  // 其他配置同理
};

4. 清理冗余代码 #

删除之前的compat版本初始化文件，确保项目中无重复初始化Firebase的逻辑，避免冲突。

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