Google登录回调profileObj未定义及createIfNotExists缺_id报错排查

两个报错是连锁触发的：

1. 第一个解构报错：Google登录回调返回的response对象里不存在profileObj字段。通常是两种诱因：要么登录流程未正常完成（用户取消授权、客户端ID配置错误、域名不在授权白名单内），要么你使用的是新版Google登录SDK，旧版SDK直接返回profileObj的逻辑已经被废弃，新版返回的是加密的credential凭证，不会直接暴露用户信息对象。
2. 第二个_id缺失报错：你加的?? {}空值兜底只是避开了解构的语法报错，但实际没有拿到有效的用户数据，解构出来的googleId为undefined，传给Sanity的createIfNotExists方法时，文档缺少必填的_id字段，自然触发参数校验报错。

• 在回调入口先做返回值合法性校验，遇到登录失败、返回结构不符合预期的场景直接中断流程，加错误提示，不要往下执行业务逻辑。
• 兼容新旧SDK的返回结构，新版SDK需要先解码返回的JWT凭证，才能拿到用户名称、ID、头像等信息，注意新版返回的用户唯一ID存放在sub字段，不是旧版的googleId字段。
• 拿到用户信息后二次校验必填字段，确认googleId等核心字段存在后，再执行本地存储、创建Sanity文档的逻辑，同时给异步接口加catch捕获异常，避免白屏。

修复后的核心代码参考：

import { jwtDecode } from "jwt-decode"; // 使用新版@react-oauth/google时需要安装该依赖解码凭证

const Login = () => {
  const navigate = useNavigate();
  const responseGoogle = (response) => {
    // 登录失败场景直接中断
    if (response.error || (!response.credential && !response.profileObj)) {
      console.error("Google登录失败", response);
      alert("登录失败，请重试");
      return;
    }

    // 兼容新旧SDK返回结构
    let userInfo;
    if (response.profileObj) {
      // 旧版react-google-login返回结构
      userInfo = response.profileObj;
    } else {
      // 新版@react-oauth/google返回结构，解码JWT取用户数据
      const decoded = jwtDecode(response.credential);
      userInfo = {
        name: decoded.name,
        googleId: decoded.sub, // 新版用户唯一ID存放在sub字段
        imageUrl: decoded.picture,
      };
    }

    // 二次校验必填字段
    const { name, googleId, imageUrl } = userInfo;
    if (!googleId || !name) {
      console.error("用户信息缺失", userInfo);
      alert("登录信息异常，请重试");
      return;
    }

    // 原有业务逻辑
    localStorage.setItem("user", JSON.stringify(userInfo));
    const doc = {
      _id: googleId,
      _type: "user",
      userName: name,
      image: imageUrl,
    };
    client.createIfNotExists(doc)
      .then(() => {
        navigate("/", { replace: true });
      })
      .catch(err => {
        console.error("用户信息同步失败", err);
        alert("登录失败，请重试");
      });
  };

  // 组件其余渲染逻辑
}

• 如果你当前还在使用已停止维护的react-google-login包，建议迁移到官方推荐的@react-oauth/google，旧包已不兼容Google最新的OAuth2.0授权规则，出现返回异常的概率极高。
• 去Google Cloud控制台核对OAuth客户端配置，确保本地开发地址、线上生产地址都已经加入授权JS来源列表，域名、端口、协议不一致都会导致授权失败，拿不到用户信息。
• 所有第三方回调、接口返回的数据都不要直接深度解构，先做存在性校验，避免因为返回结构变动导致页面崩溃。

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