Next.js无需useEffect或动态导入解决‘window is not defined’问题

针对你遇到的SSR环境下window不存在的问题，这里有两个简洁的解决思路，不需要在每个组件里写useEffect：

方案一：惰性初始化函数 #

把Functions实例改成惰性加载的方式，只在首次调用时完成初始化和模拟器连接判断：

import { getFunctions, connectFunctionsEmulator, getApps, initializeApp } from "firebase/functions";
import { firebaseConfig } from "./path-to-your-firebase-config";

let functionsInstance;

export const getFunctionsInstance = () => {
  if (!functionsInstance) {
    // 初始化Firebase App和Functions实例（服务端也能执行）
    functionsInstance = getFunctions(getApps().length ? getApp() : initializeApp(firebaseConfig));
    
    // 仅在客户端环境检查hostname并连接模拟器
    if (typeof window !== "undefined" && window.location.hostname === "localhost") {
      connectFunctionsEmulator(functionsInstance, '127.0.0.1', 5001);
    }
  }
  return functionsInstance;
};

使用时直接调用getFunctionsInstance()即可，比如在组件或API调用里：

const functions = getFunctionsInstance();
// 调用Functions方法
const myFunction = httpsCallable(functions, 'myFunction');

方案二：拆分初始化与模拟器连接逻辑 #

把不需要window的初始化部分放在顶层，模拟器连接逻辑单独放在客户端判断里：

import { getFunctions, connectFunctionsEmulator, getApps, initializeApp } from "firebase/functions";
import { firebaseConfig } from "./path-to-your-firebase-config";

// 这部分服务端也能安全执行，不会涉及window
export const functions = getFunctions(getApps().length ? getApp() : initializeApp(firebaseConfig));

// 仅在客户端环境执行模拟器连接
if (typeof window !== "undefined") {
  if (window.location.hostname === "localhost") {
    connectFunctionsEmulator(functions, '127.0.0.1', 5001);
  }
}

这种方式更接近你原来的代码结构，只是把依赖window的逻辑单独隔离到客户端判断中。Next.js在服务端渲染时会跳过typeof window !== "undefined"包裹的代码，不会触发错误。

关键说明 #

• Firebase App和Functions的初始化本身不依赖浏览器环境，所以可以安全在服务端执行；只有连接模拟器的步骤需要检查hostname，这一步必须延迟到客户端。
• 两种方案都保证了Firebase App和Functions实例的单例性，不会重复初始化。

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