React Google登录报错：无法解构credentialResponse.profileObj的name属性

这个错误的核心原因有两个：

• 你大概率在用已废弃的react-google-login库，新版Google Identity Services（GIS）不再返回profileObj字段，而是通过JWT凭证(credential)返回用户信息
• 未处理用户取消登录的场景，此时credentialResponse会是空值，导致解构profileObj时直接出错

修正步骤： #

1. 替换依赖为官方推荐的@react-oauth/google

npm install @react-oauth/google
# 或用yarn
yarn add @react-oauth/google

2. 在项目入口文件（比如index.js/main.jsx）配置Google OAuth Provider：

import { GoogleOAuthProvider } from '@react-oauth/google';
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <GoogleOAuthProvider clientId="你的Google客户端ID">
    <App />
  </GoogleOAuthProvider>
);

3. 实现登录组件，处理JWT解析和错误情况：

import { GoogleLogin } from '@react-oauth/google';
import jwtDecode from 'jwt-decode'; // 需要安装：npm install jwt-decode

function GoogleLoginButton() {
  const handleSuccess = (credentialResponse) => {
    // 先判断用户是否取消登录
    if (!credentialResponse?.credential) return;
    
    // 解析JWT获取用户信息
    const userInfo = jwtDecode(credentialResponse.credential);
    console.log('用户信息:', userInfo);
    
    // 直接从解析后的对象中提取所需字段
    const { name, email, picture } = userInfo;
    // 后续逻辑：比如存入状态、发送到后端等
  };

  const handleFailure = (error) => {
    console.error('登录失败:', error);
  };

  return (
    <GoogleLogin
      onSuccess={handleSuccess}
      onError={handleFailure}
      useOneTap // 可选：启用一键登录功能
    />
  );
}

export default GoogleLoginButton;

关键注意点： #

• 彻底弃用react-google-login，该库已停止维护，完全不兼容新版Google登录服务
• 必须先校验credentialResponse.credential是否存在，避免用户取消登录时的解构错误
• 用jwt-decode解析JWT凭证，用户的name、email等信息都是JWT payload里的标准字段，直接提取即可

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