React.js+Firebase+Redux集成Google认证失效问题排查

以下是针对你的代码和场景的核心问题点及修复方案：

1. Login组件未触发登录函数 #

在login.jsx的Google按钮点击事件中，你仅引用了props.signIn函数但未执行，导致点击按钮无任何响应。

错误代码片段：

<Google onClick={() => props.signIn}>

修复后：

<Google onClick={() => props.signIn()}>

或更简洁的写法：

<Google onClick={props.signIn}>

2. Firebase Auth实例获取错误 #

在firebase.js中，你直接通过firebase.auth()获取实例，正确做法应从初始化后的firebaseApp实例中获取，否则无法关联到你的项目配置。

错误代码片段：

const auth = firebase.auth();

修复后：

const auth = firebaseApp.auth();

3. Firebase配置参数为空 #

你的firebaseConfig所有字段均为空字符串，必须替换为Firebase控制台中对应项目的真实配置。登录Firebase控制台，进入项目设置，复制「SDK设置和配置」中的参数填入：

示例配置（替换为你的真实值）：

export const firebaseConfig = {
    apiKey: "AIzaSyDxxx...",
    authDomain: "your-project-id.firebaseapp.com",
    projectId: "your-project-id",
    storageBucket: "your-project-id.appspot.com",
    messagingSenderId: "123456789",
    appId: "1:123456789:web:abc123..."
};

4. Firebase控制台未启用Google登录 #

即使代码正确，若未在Firebase后台开启Google认证，功能也无法生效：

• 登录Firebase控制台，进入Authentication → 登录方法
• 找到Google，点击启用，填写项目支持邮箱并保存设置

5. 可选补充：Redux状态更新（完善用户状态管理） #

当前signInAPI仅处理登录请求，未将用户信息存入Redux状态。若后续需要在应用中使用用户数据，可补充action派发：

修改后的action index.js：

import { auth, provider } from "../firebase";

export const SET_USER = "SET_USER";

export function signInAPI() {
    return (dispatch) => {
        auth 
        .signInWithPopup(provider)
        .then(({ user }) => {
            console.log(user);
            dispatch({ type: SET_USER, payload: user });
        })
        .catch((error) => alert(error.message));
    };
}

同时需在reducer中添加对应逻辑处理该action。

验证步骤 #

1. 完成所有修复后重启开发服务器
2. 点击Google登录按钮，检查浏览器控制台是否输出用户信息
3. 若仍报错，查看控制台错误信息针对性排查（如跨域限制、API密钥权限等）

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