MERN栈集成Google OAuth 2.0报google is not defined错误

核心触发原因是你加载Google Identity Services（GSI）客户端脚本时使用了async和defer属性，脚本会异步加载、不阻塞页面解析。但React组件的useEffect在组件首次挂载时就会同步执行，此时GSI脚本还未下载、解析完成，全局作用域下不存在google对象，就会抛出引用错误。
另外你代码里写的/*global google*/只是供ESLint识别全局变量、跳过语法校验的注释，没有任何等待脚本加载的实际作用，解决不了运行时的对象缺失问题。

• 方案1（推荐）：监听脚本加载完成事件后再执行OAuth初始化
  不要在useEffect里直接调用google对象的方法，先判断全局google对象是否存在，未加载完成时就监听脚本的load事件，等脚本加载完毕再跑初始化、渲染登录按钮、弹出一键登录提示的逻辑，同时记得组件卸载时移除事件监听避免内存泄漏，参考代码如下：

  useEffect(() => {
    const initGoogleOAuth = () => {
      google.accounts.id.initialize({
        client_id: "*****************************************.apps.googleusercontent.com",
        callback: handleCallbackResponse,
      });
      google.accounts.id.renderButton(
        document.getElementById("SignInDiv"),
        {
          theme: "outline",
          shape: "circle",
          width: "270",
          text: "signin_with",
          logo_alignment: "center",
        }
      );
      google.accounts.id.prompt();
    }
  
    // 已加载完成直接初始化
    if (window.google) {
      initGoogleOAuth();
      return;
    }
  
    // 未加载则监听加载完成事件
    const gsiScript = document.querySelector('script[src="https://accounts.google.com/gsi/client"]');
    const handleScriptLoad = () => initGoogleOAuth();
    gsiScript.addEventListener('load', handleScriptLoad);
  
    return () => {
      gsiScript.removeEventListener('load', handleScriptLoad);
    }
  }, []);
  

  这个方案不会阻塞首屏加载，是兼容性和性能表现最好的方案。
• 方案2：移除脚本标签的异步加载属性
  直接把GSI脚本标签上的async、defer属性删掉，改为同步加载：

  <script src="https://accounts.google.com/gsi/client"></script>
  

  页面解析到这个脚本标签时会暂停解析，等脚本下载执行完成、google对象挂载到全局后再继续渲染React应用，这样组件挂载时google对象一定存在。缺点是会轻微阻塞首屏渲染，对首屏加载速度要求高的场景不推荐用。

你写的handleCallbackResponse里存在状态更新时序问题：setUser是异步方法，调用后立刻判断if (user !== null)拿到的还是更新前的旧user值，会出现登录成功但无法正常跳转的问题。建议把跳转逻辑放到单独监听user状态的useEffect里执行，避免时序bug。

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