Next.js使用Firebase Auth遇window未定义错误及getAnalytics咨询

错误原因 #

Next.js 默认采用服务端渲染（SSR），服务器环境中不存在浏览器专属的 window 对象——不管是初始化 Firebase Analytics，还是直接在组件顶层操作 window.recaptchaVerifier，都会触发这个错误。

1. 修正 firebaseConfig.js 的 Analytics 初始化 #

将 Analytics 的初始化改为仅在浏览器环境执行：

import { initializeApp } from "firebase/app";
import { getAnalytics, isSupported } from "firebase/analytics";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // 你的配置信息
};
export const app = initializeApp(firebaseConfig);
export const authentication = getAuth(app);

// 仅在浏览器环境初始化 Analytics
export let analytics;
if (typeof window !== 'undefined') {
  isSupported().then((supported) => {
    if (supported) {
      analytics = getAnalytics(app);
    }
  });
}

这里用 typeof window !== 'undefined' 判断运行环境，同时通过 isSupported() 确保当前浏览器允许使用 Analytics（部分隐私设置会禁用这类统计工具）。

2. 修正 index.js 的 Recaptcha 代码 #

组件顶层代码会在服务器端执行，不能直接操作 window，需将 Recaptcha 初始化逻辑放到 useEffect 中（useEffect 仅在客户端执行）：

import { useEffect, useState } from 'react';
import { RecaptchaVerifier } from "firebase/auth";
import { authentication } from '../path/to/firebaseConfig'; // 导入配置中的 auth 实例

export default function Home() {
  const [recaptchaVerifier, setRecaptchaVerifier] = useState(null);

  useEffect(() => {
    // 客户端环境才初始化 Recaptcha
    const verifier = new RecaptchaVerifier('recaptcha-container', {}, authentication);
    setRecaptchaVerifier(verifier);
    window.recaptchaVerifier = verifier; // 若业务需要可挂载到 window
  }, [authentication]);

  const getOTP = () => {
    if (recaptchaVerifier) {
      // 此处编写获取OTP的业务逻辑
    }
  }

  return (
    <div>
      <div id="recaptcha-container"></div>
      <button onClick={getOTP}>获取OTP</button>
    </div>
  )
}

核心要点：

• 用 useEffect 包裹客户端专属代码，避免服务器端执行报错
• 推荐用 React 状态管理 Recaptcha 实例，比直接挂载到 window 更易维护

getAnalytics 用途说明 #

getAnalytics 是 Firebase Analytics 工具的初始化入口，Firebase Analytics 是免费的应用数据统计服务，主要作用包括：

• 追踪用户行为：记录页面访问、按钮点击、表单提交等自定义事件
• 统计核心指标：用户留存率、日活/月活用户数、用户地域分布等
• 联动其他 Firebase 服务：配合 A/B Testing 做功能实验，或关联 Cloud Messaging 推送用户行为数据
• 优化产品体验：通过数据定位用户高频使用功能、发现体验瓶颈

注意：Analytics 依赖浏览器环境，因此在 SSR 应用中必须做环境判断后再初始化，否则会触发 window is not defined 错误。

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