Next.js构建时出现Firebase auth环境不支持错误排查

错误原因 #

这个构建错误和Firebase授权域名设置无关，核心问题出在Next.js的构建机制上：

• Next.js执行npm run build时，会在Node.js环境下完成服务器端渲染（SSR）或静态页面生成（SSG）
• Firebase Auth的signInWithRedirect、getRedirectResult这类方法是仅支持浏览器环境的API，在Node.js环境中调用就会触发auth/operation-not-supported-in-this-environment错误
• 用户使用时功能正常，是因为运行时代码在浏览器环境执行，不会触发该限制

修复方案 #

需要确保认证相关的浏览器端API只在客户端环境执行，以下两种方式均可：

方式1：通过typeof window判断环境 #

修改核心认证代码，将浏览器专属逻辑包裹在环境判断内：

// 仅在浏览器环境执行认证相关逻辑
if (typeof window !== 'undefined') {
  const provider = new GoogleAuthProvider()
  const auth = getAuth()

  const handleLogin = () => {
    signInWithRedirect(auth, provider)
      .then((result) => {
        console.log('with redirect: ' + result)
      })
      .catch((error) => {
        console.log(error)
      })
  }

  getRedirectResult(auth)
    .then((result) => {
      if (result) {
        const credential = GoogleAuthProvider.credentialFromResult(result)
        const token = credential.accessToken
        const user = result.user
        console.log(user)
      }
    })
    .catch((error) => {
      console.log(error)
    })
}

方式2：使用React useEffect钩子 #

useEffect只会在客户端渲染阶段执行，适合放在组件内部处理：

import { useEffect } from 'react'

// 组件内部逻辑
useEffect(() => {
  const provider = new GoogleAuthProvider()
  const auth = getAuth()

  // 处理登录重定向结果
  getRedirectResult(auth)
    .then((result) => {
      if (result) {
        const credential = GoogleAuthProvider.credentialFromResult(result)
        const token = credential.accessToken
        const user = result.user
        console.log(user)
      }
    })
    .catch((error) => {
      console.log(error)
    })
}, [])

// 登录点击事件本身在客户端触发，无需额外判断
const handleLogin = () => {
  const provider = new GoogleAuthProvider()
  const auth = getAuth()
  signInWithRedirect(auth, provider)
    .then((result) => {
      console.log('with redirect: ' + result)
    })
    .catch((error) => {
      console.log(error)
    })
}

额外优化：Firebase初始化的客户端限制 #

虽然当前初始化代码不会直接引发错误，但建议确保Auth实例仅在客户端创建：

const initMyFirebase = () => {
  if (!getApps().length) {
    const app = initializeApp(firebaseConfig)
    // 仅在浏览器环境初始化Auth
    if (typeof window !== 'undefined') {
      const auth = getAuth(app)
    }
  }
}

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