Next.js集成Firebase9.1.3时无法导入GoogleAuthProvider等实例

1. 修正getAuth实例绑定 #

Firebase 9 模块化 API 要求getAuth必须传入初始化完成的app实例才能正常生成关联的认证对象，将你代码中对应的行修改为：

const auth = getAuth(app);

2. 修正导出导入匹配规则 #

你当前使用默认导出打包三个实例的写法，容易出现导入时的解构错误，推荐优先改用命名导出方案，降低出错概率：

• 修改firebase.js的导出逻辑，替换原来的默认导出：

// 移除原来的export default语句，替换为以下命名导出
export const db = getFirestore(app);
export const auth = getAuth(app);
export const provider = new GoogleAuthProvider();

• 组件内导入写法调整为：

import { db, auth, provider } from '你项目中firebase.js的相对路径';

如果要保留原有默认导出写法，组件内需要先导入整个默认对象再解构属性，不能直接对默认导出做解构：

// 错误写法 ❌
// import { provider } from './firebase.js'

// 正确写法 ✅
import firebaseInst from './firebase.js'
const { provider, auth, db } = firebaseInst

3. 适配Next.js服务端渲染规则 #

Next.js 预渲染阶段会在服务端执行组件代码，而Firebase Auth相关API属于客户端专属逻辑，直接在组件顶层调用会触发运行错误，根据你使用的路由方案做对应调整：

• Pages Router：将Firebase Auth调用逻辑放到useEffect钩子中，仅在客户端组件挂载完成后执行
• App Router（Next.js 13+）：给调用Firebase逻辑的组件顶部添加'use client'指令，标记为客户端组件

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