谷歌登录回调解构response.profileObj报undefined错误如何解决

报错本质是执行解构操作时，response.profileObj为undefined，JS无法从undefined类型上读取目标属性，直接抛出类型错误，触发场景共两类：

• 依赖包版本不匹配：如果你安装使用的是当前主流维护的@react-oauth/google（谷歌官方推荐的新版React登录SDK），其登录成功回调根本不存在profileObj字段。profileObj是已经停止维护的旧包react-google-login的返回结构，新版SDK回调仅返回JWT格式的credential授权令牌，用户信息需要手动从令牌中解码获取。
• 缺少异常分支判断：当用户主动取消登录、弹窗被浏览器拦截、授权校验失败时，回调函数依然会触发，但此时返回的是错误响应对象，不会携带profileObj字段，直接读取嵌套属性就会触发报错。

1. 增加防御性校验，兼容新旧SDK响应格式，同时覆盖登录失败场景，避免直接解构undefined。
2. 针对新版SDK的credential返回值，解码JWT载荷提取所需的用户字段，无需额外引入第三方依赖，用浏览器原生API即可完成解码。

修复后的可直接运行代码如下：

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const responseGoogle = (response) => {
  let userInfo = null;

  // 兼容旧版react-google-login的返回结构
  if (response?.profileObj) {
    userInfo = response.profileObj;
  } 
  // 处理新版@react-oauth/google的返回结构
  else if (response?.credential) {
    // 解码JWT的payload部分
    const base64Str = response.credential.split('.')[1];
    // 处理base64编码格式兼容
    const formattedBase64 = base64Str.replace(/-/g, '+').replace(/_/g, '/');
    const payload = JSON.parse(decodeURIComponent(escape(atob(formattedBase64))));
    // 字段对齐旧版结构，后续业务逻辑无需改动
    userInfo = {
      googleId: payload.sub,
      name: payload.name,
      imageUrl: payload.picture
    };
  } 
  // 登录失败场景分支
  else {
    console.error('谷歌登录异常：', response);
    alert('登录失败，请检查网络或重试');
    return;
  }

  localStorage.setItem('user', JSON.stringify(userInfo));
  const { name, googleId, imageUrl } = userInfo;
  const userDoc = {
    _id: googleId,
    _type: 'user',
    userName: name,
    image: imageUrl,
  };

  client.createIfNotExists(userDoc).then(() => {
    navigate('/', { replace: true });
  });
};

补充说明：如果确认自己使用的是旧版react-google-login依然出现该报错，优先检查谷歌云控制台配置的授权来源地址、客户端ID是否和项目中配置的一致，配置错误时回调不会返回正常的用户信息。

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