NextJS集成Firebase Google身份验证时出现initializeApp未定义报错

• 首先排查依赖版本兼容性：react-firebaseui目前仅稳定支持Firebase v9及以下版本，如果你安装的是Firebase v10+版本，就会出现调用initializeApp时的undefined报错。你可以执行npm list firebase查看当前版本，若为v10+直接降级到v9最后稳定版即可：

npm install firebase@9.23.0

• 修正Firebase初始化逻辑，避免服务端执行报错：Next.js默认会在服务端预渲染页面，而Firebase仅能在客户端运行，同时需要避免重复初始化的问题，修改firebaseApp.js代码如下：

// 修改后的firebaseApp.js
import { initializeApp, getApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";

const firebaseConfig = {
  // 注意Next.js客户端可访问的环境变量必须加NEXT_PUBLIC_前缀
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL
};

// 不存在已初始化实例时再执行初始化
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
const db = getDatabase(app);
const auth = getAuth(app);

export { db, auth };

• 修正StyledFirebaseAuth的渲染逻辑：该组件仅能在客户端渲染，你需要给Login组件增加客户端渲染判断，避免服务端预渲染时报错：

// 修改后的login.js
import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import { useAuthState } from 'react-firebase-hooks/auth';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import { auth } from '../app/firebaseApp';
import { uiConfig } from '../config/firebaseAuthUI.config';

export default function Login() {
  const [user, loading, error] = useAuthState(auth);
  const router = useRouter();
  // 标记是否为客户端渲染环境
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  if (loading) return 'loading'
  else if (error) return error.message

  else if (user) {
    router.push('/');
  }

  const authConfig = uiConfig(auth);

  return (
    <>
      <Head>
        <title>Login</title>
      </Head>
      {/* 仅在客户端渲染登录组件 */}
      {isClient && <StyledFirebaseAuth uiConfig={authConfig} firebaseAuth={auth} />}
    </>
  )
}

• 最后确认配置项正确：所有需要暴露给客户端的Firebase配置变量必须以NEXT_PUBLIC_为前缀命名，否则Next.js会在服务端隐藏这些变量，导致firebaseConfig取值为空，触发初始化报错；同时确认../app/firebaseApp的导入路径和你实际文件存放路径一致，路径错误也会导致导入的auth为undefined，间接触发相关报错。

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