Next.js+TypeScript中Firebase Auth谷歌登录遇auth/argument-error问题

问题分析 #

你基于Next.js+TypeScript开发项目，用Firebase做身份验证和数据库管理，邮箱密码登录功能正常，但谷歌登录触发auth/argument-error错误。结合官方文档说明，该错误指向方法参数不正确，而邮箱登录正常已排除基础Firebase配置和Auth实例的问题，重点排查谷歌登录相关的初始化和调用逻辑。

修复方案 #

1. 修正Auth实例初始化方式 #

你的代码中使用initializeAuth初始化Auth，但该方法需要手动配置客户端环境的持久化策略，否则可能导致参数异常。推荐使用getAuth（Firebase默认初始化方式，自动适配客户端环境）：

修改firebaseconfig.ts：

import { initializeApp, type FirebaseOptions } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { GoogleAuthProvider, getAuth } from 'firebase/auth'; // 替换initializeAuth为getAuth

const firebaseConfig: FirebaseOptions = {
    apiKey: XXXXXX,
    authDomain: XXXXX,
    projectId: xxxx,
    storageBucket: xxxx,
    messagingSenderId: xxxxx,
    appId: xxxxx,
    measurementId: xxxxx,
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
const auth = getAuth(app); // 使用getAuth初始化Auth实例
const googleProvider = new GoogleAuthProvider();
export { auth, googleProvider };

export default app;

2. 若需保留initializeAuth，需手动配置持久化 #

如果你有自定义Auth配置需求必须使用initializeAuth，需添加客户端持久化配置：

import { initializeAuth, browserLocalPersistence } from 'firebase/auth';

// 初始化Auth时指定持久化策略
const auth = initializeAuth(app, {
  persistence: browserLocalPersistence
});

3. 检查Firebase控制台谷歌登录配置 #

进入Firebase控制台 → 认证 → 登录方法 → 谷歌，确保：

• 已启用谷歌登录
• 配置了正确的项目支持邮箱（与你的AuthDomain匹配）

4. 补全组件中缺失的状态定义 #

你的signInWithGoogle和onSubmit函数分别调用了setLoading和setShowModal，但组件中未定义这些状态，会导致运行时错误，需添加：

const [loading, setLoading] = useState(false);
const [showModal, setShowModal] = useState(false);

验证 #

修改完成后重启项目，测试谷歌登录流程，若参数错误问题仍存在，可打印auth和googleProvider实例确认是否正常初始化。

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