Next.js集成Firebase报Cannot read 'initializeApp' of undefined错误如何解决

问题原因及修复方案 #

• 版本不兼容问题
  你当前使用的是Firebase v9+的模块化导入语法，需确保安装的react-firebaseui版本≥6.0.0，低版本的react-firebaseui仅支持Firebase v8及之前的命名空间导入语法，会导致传入auth实例时抛出异常。
  你可以执行以下命令更新依赖：

npm i react-firebaseui@latest firebase@latest

• 重复调用getAuth导致异常
  你现在在组件的JSX中直接调用getAuth(app)，会导致组件每次渲染时都重新生成auth实例，属于不必要的重复调用，部分场景下会触发react-firebaseui的实例校验报错，建议将auth实例提取到组件外部定义。
• 导入路径错误
  确认你../firebase/firebase文件中的app是命名导出，你当前用import { app } from "../firebase/firebase"导入，如果firebase配置文件中是export default app的默认导出，会导致拿到的app为undefined，调用getAuth(undefined)自然报错。

修改后的完整代码 #

import React from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import { app } from "../firebase/firebase";
import { getAuth, EmailAuthProvider, GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";

// 提前定义auth实例，避免重复调用
const auth = getAuth(app);

// Configure FirebaseUI.
const uiConfig = {
  signInFlow: 'popup',
  signInSuccessUrl: "/",
  signInOptions: [
    EmailAuthProvider.PROVIDER_ID,
    GoogleAuthProvider.PROVIDER_ID,
    GithubAuthProvider.PROVIDER_ID,
  ],
};

export default function SignInScreen() {
  return (
    <div>
      <h1>PolygonHR Login</h1>
      <p>Please sign-in:</p>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={auth} />
    </div>
  );
}

额外排查点 #

如果以上修改后仍报错，可以检查Firebase配置文件是否做了防重复初始化处理，避免多次初始化Firebase实例导致的异常：

// ../firebase/firebase 文件示例
import { initializeApp, getApps } from "firebase/app";

const firebaseConfig = {
  // 你的配置项
};

// 仅当没有已初始化的实例时才初始化
if (!getApps().length) {
  initializeApp(firebaseConfig);
}

export const app = getApps()[0];

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