NextJS部署Vercel遇Firebase Auth初始化错误求助

问题描述 #

将NextJS应用部署到Vercel时触发Firebase Auth相关错误，开发模式运行完全正常，但部署阶段报错，提示需先调用initializeAuth或getAuth再初始化其他Firebase SDK。

相关代码（Firebase.ts） #

import { initializeApp } from "firebase/app";
import {
  getAuth,
  signInWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
} from "firebase/auth";
import { handlerSetUser } from "./utils";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

onAuthStateChanged(auth, (user: any) => {
  if (user) {
    handlerSetUser(user);
  } else {
    handlerSetUser(false);
  }
});

export const login = async (email: any, password: any) => {
  try {
    const result = await signInWithEmailAndPassword(auth, email, password);
    return result;
  } catch (error: any) {
    alert(error.message);
  }
};

export const logout = async () => {
  try {
    await signOut(auth);
  } catch (error: any) {
    alert(error.message);
  }
};

部署错误信息 #

_errorFactory: ErrorFactory {
    service: 'auth',
    serviceName: 'Firebase',
    errors: {
      'dependent-sdk-initialized-before-auth': 'Another Firebase SDK was initialized and is trying to use Auth before Auth is initialized. Please be sure to call `initializeAuth` or `getAuth` before starting any other Firebase SDK.'
    }
  },

解决方法 #

• 排查其他Firebase SDK初始化顺序：检查项目中是否有Firestore、Storage、Database等其他Firebase服务的初始化代码在Auth之前执行。确保getAuth或initializeAuth是所有Firebase服务中最早执行的初始化操作。

• 将Auth监听逻辑移至客户端组件：当前代码在模块顶层直接执行onAuthStateChanged，在Vercel的SSR/SSG场景下可能在服务端触发，导致与其他SDK初始化冲突。建议把监听逻辑放到客户端组件的useEffect钩子中：

  // 客户端组件示例（如layout.tsx或用户组件）
  import { useEffect } from 'react';
  import { auth } from './Firebase';
  import { handlerSetUser } from './utils';
  
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      handlerSetUser(user || false);
    });
    return unsubscribe;
  }, []);
  

  同时删除Firebase.ts中顶层的onAuthStateChanged调用。

• 使用initializeAuth适配SSR场景：针对NextJS服务端渲染场景，推荐用initializeAuth替代getAuth，并配置适配选项避免自动初始化的顺序问题：

  import { initializeApp } from "firebase/app";
  import { initializeAuth } from "firebase/auth";
  
  const app = initializeApp(firebaseConfig);
  // web环境下可根据需求配置持久化，或省略配置
  const auth = initializeAuth(app, {
    persistence: typeof window !== 'undefined' ? 'local' : undefined
  });
  

• 验证Vercel环境变量：确认所有Firebase相关环境变量在Vercel控制台已正确配置，变量名与代码中完全一致。环境变量缺失可能间接引发初始化顺序错误。

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