Next.js+Firebase构建报错：未创建默认Firebase应用问题求助

问题分析 #

构建时出现FirebaseError: No Firebase App '[DEFAULT]' has been created的核心原因：

• 原Firebase初始化代码仅在客户端（typeof window !== 'undefined'）执行，但Next.js的npm run build会触发服务器端渲染/静态生成逻辑，此时服务器环境中window不存在，导致Firebase App未被初始化。
• 代码②的waitForFirebaseAuth直接调用getAuth()，服务器端无初始化的App，因此抛出错误。

解决方案 #

1. 修正Firebase初始化代码 #

移除客户端环境判断，确保服务器端也能正确初始化Firebase App（Firebase初始化是幂等操作，多次调用不会冲突）：

import { getApp, getApps, initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FAUTH_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FAUTH_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FAUTH_PROJECT_ID,
  appId: process.env.NEXT_PUBLIC_FAUTH_APP_ID,
};

// 去掉window判断，确保客户端/服务器端都能初始化App
if (!getApps().length) {
  initializeApp(firebaseConfig);
}

export const auth = getAuth(getApp());

2. 调整Axios拦截器，区分客户端/服务器端环境 #

服务器端无法获取客户端的Firebase Auth状态，需在拦截器中做环境判断，避免无效的Auth监听：

import Axios from 'axios';
import { User } from 'firebase/auth';
import { auth } from './path-to-your-firebase-init-file'; // 导入修正后的auth实例

export const apiClient = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
  timeout: 30000,
});

async function waitForFirebaseAuth() {
  // 仅在客户端执行Auth状态监听
  if (typeof window === 'undefined') {
    return null;
  }
  
  return new Promise<User | null>((resolve) => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      unsubscribe(); // 无论是否获取到用户都取消订阅，避免内存泄漏
      resolve(user);
    });
  });
}

apiClient.interceptors.request.use(
  async (config) => {
    let token = '';
    
    // 客户端环境：等待Auth状态并获取token
    if (typeof window !== 'undefined') {
      const user = await waitForFirebaseAuth();
      if (user) {
        token = await user.getIdToken();
      }
    } 
    // 服务器端环境：若需带认证信息，可从Cookie/Next.js Session中获取token
    // 示例：const token = req.cookies.firebase_id_token;（需结合getServerSideProps/headers）
    
    config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

3. 可选：调整静态生成页面的API请求逻辑 #

如果页面使用getStaticProps静态生成，且其中调用了apiClient，需确保该请求不需要认证信息，或仅在客户端发起请求（避免服务器端无token导致的问题）。

验证修改 #

1. 执行npm run build，确认Firebase App未初始化的错误消失。
2. 启动开发服务器，验证初始渲染的401问题仍然解决。

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