Firebase Google Authentication报错：TypeError读取constructor未定义，登录不稳定

问题详情 #

• 报错信息：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'constructor')
• 表现：登录功能时好时坏，推测和异步逻辑相关
• 背景：刚接触Firebase，参考旧教程+查阅官方新文档，需要排查代码问题

相关代码 #

const onSocialClick = async (e) => {
        const {
            target: { name },
        } = e;
        let provider;
        if (name === 'google') {
            // Creates the provider object.
            provider = new GoogleAuthProvider();
            provider.addScope('profile');
            provider.addScope('email');
        } else if (name === 'github') {
            provider = new GithubAuthProvider();
            provider.addScope('repo');
        }
        const user = await signInWithRedirect(auth, provider);
    };

报错截图 #

问题分析与修复 #

核心问题1：signInWithRedirect用法错误 #

旧教程容易混淆signInWithPopup和signInWithRedirect的逻辑：

• signInWithPopup是弹窗登录，可以直接await获取用户结果
• signInWithRedirect是跳转式登录，当前页面会刷新，无法在当前函数中直接await获取user对象，必须在页面加载时通过getRedirectResult来获取登录结果

核心问题2：provider可能未初始化 #

如果点击的元素name既不是google也不是github，provider会是undefined，传入signInWithRedirect就会触发报错。

修正后的代码 #

// 处理登录跳转逻辑
const onSocialClick = (e) => {
    const { target: { name } } = e;
    let provider;

    switch(name) {
        case 'google':
            provider = new GoogleAuthProvider();
            provider.addScope('profile');
            provider.addScope('email');
            break;
        case 'github':
            provider = new GithubAuthProvider();
            provider.addScope('repo');
            break;
        default:
            console.error('不支持该登录方式');
            return; // 提前返回，避免后续报错
    }

    signInWithRedirect(auth, provider)
        .catch(err => console.error('登录跳转失败:', err));
};

// 页面初始化时获取跳转登录结果
const checkLoginResult = async () => {
    try {
        const result = await getRedirectResult(auth);
        if (result) {
            const user = result.user;
            console.log('登录成功:', user);
            // 这里写登录成功后的逻辑，比如跳转首页、存储用户信息等
        }
    } catch (err) {
        console.error('获取登录结果失败:', err);
    }
};

// 页面加载时执行
checkLoginResult();

额外注意事项 #

• 确保已经正确初始化Firebase Auth实例（auth对象是有效的）
• 检查Firebase控制台中是否已启用Google/GitHub登录方式
• 确认项目的授权域名已添加到Firebase控制台的认证设置中

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