Node/React/Chakra项目运行yarn dev时出现Firebase导入错误

核心触发原因有两个：

• firebaseConfig 配置对象的所有字段均为空，没有填入Firebase项目对应的真实配置参数，initializeApp 接收到非法的空配置后无法完成初始化流程，后续所有依赖App实例的Firebase服务调用都会直接抛出错误。
• 调用 getAuth() 时没有显式传入已经初始化完成的app实例，SDK隐式查找默认实例时因为前面初始化失败找不到合法实例，会额外触发实例不存在的报错。

如果你的项目是基于Next.js、Nuxt这类带服务端渲染的框架，顶层直接调用getAnalytics()还会因为服务端不存在浏览器window对象，额外触发环境相关报错。

按以下步骤调整代码即可：

1. 补全Firebase配置
   登录Firebase控制台，进入对应项目的「项目设置-常规」页，找到你创建的Web应用，把SDK初始化代码段里的配置值完整复制，替换掉firebaseConfig里所有留空的字段，补全后的配置格式如下：

const firebaseConfig = {
  apiKey: "你的项目实际apiKey",
  authDomain: "你的项目实际authDomain",
  databaseURL: "你的项目实际databaseURL",
  projectId: "你的项目实际projectId",
  storageBucket: "你的项目实际storageBucket",
  messagingSenderId: "你的项目实际messagingSenderId",
  appId: "你的项目实际appId",
  measurementId: "你的项目实际measurementId" // 该字段可选，没有对应值可以直接删除这行
};

2. 显式传入App实例初始化Auth服务
   把原来的const auth = getAuth();修改为const auth = getAuth(app);，显式绑定已经初始化的App实例，避免SDK隐式查找失败的问题。
3. （SSR项目必做）加客户端判断初始化Analytics
   如果项目存在服务端渲染逻辑，不要在顶层直接调用getAnalytics，增加浏览器环境判断，避免服务端执行报错：

let analytics;
if (typeof window !== 'undefined') {
  analytics = getAnalytics(app);
}

调整完成后的完整可运行代码参考：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "替换为你的项目真实apiKey",
  authDomain: "替换为你的项目真实authDomain",
  databaseURL: "替换为你的项目真实databaseURL",
  projectId: "替换为你的项目真实projectId",
  storageBucket: "替换为你的项目真实storageBucket",
  messagingSenderId: "替换为你的项目真实messagingSenderId",
  appId: "替换为你的项目真实appId",
  measurementId: "替换为你的项目真实measurementId"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
let analytics;
if (typeof window !== 'undefined') {
  analytics = getAnalytics(app);
}
const auth = getAuth(app);

export { auth }

修改完成后重新执行yarn dev命令即可正常启动项目。

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