Next.js中使用Firebase Analytics时getAnalytics()报错：未初始化默认应用

问题原因 #

报错No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()的核心原因是：调用getAnalytics()之前，未初始化Firebase的默认应用实例。

解决步骤 #

1. 创建Firebase初始化文件
   在项目中新建Firebase配置文件（比如firebase/client.js），先完成Firebase应用初始化，再获取Analytics实例：

// firebase/client.js
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";

// 替换为你的Firebase项目配置，从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应用
const app = initializeApp(firebaseConfig);
// 仅在客户端环境初始化Analytics（服务器端无window对象）
const analytics = typeof window !== "undefined" ? getAnalytics(app) : null;

export { app, analytics };

2. 在组件中正确使用Analytics
   确保组件是客户端组件（Next.js 13+需加'use client'指令），然后导入初始化好的analytics实例：

'use client'; // Next.js 13+客户端组件必须添加该指令
import { analytics } from "../firebase/client";
import { logEvent } from "firebase/analytics";
import { useEffect } from "react";

export default function YourComponent({ showScreen }) {
  useEffect(() => {
    // 先判断analytics是否存在，避免服务器端渲染报错
    if (analytics) {
      logEvent(analytics, "page_view", { showScreen });
    }
  }, [showScreen]);

  return <div>你的组件内容</div>;
}

关键注意事项 #

• Firebase Analytics仅能在客户端环境运行，组件必须是客户端组件，不能在服务器组件中直接使用。
• 初始化时判断typeof window !== "undefined"，是为了避免Next.js服务器端渲染时因缺少window对象抛出错误。
• 务必保证firebaseConfig里的配置信息与Firebase控制台的项目配置完全一致。

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