React应用中Google Sign In按钮偶发无法渲染问题排查

核心问题 #

异步加载的Google GSI客户端脚本，其加载完成时机和React组件渲染时机不匹配：当Login组件完成渲染时，GSI库可能还未加载完毕，导致按钮初始化逻辑无法执行，从而出现按钮不显示的情况。

修复方案 #

方案1：组件内监听脚本加载状态，手动初始化按钮 #

修改Login组件，确保GSI库加载完成后再初始化登录按钮：

import { useEffect } from 'react';

const Login = () => {
  useEffect(() => {
    const initGoogleButton = () => {
      // 确认GSI库已加载完成
      if (window.google?.accounts?.id) {
        window.google.accounts.id.initialize({
          client_id: '你的Google客户端ID', // 替换为实际Client ID
          callback: (response) => {
            // 处理登录回调逻辑
            console.log('登录成功:', response);
          }
        });
        // 渲染按钮到指定容器
        window.google.accounts.id.renderButton(
          document.getElementById('google-login-container'),
          { theme: 'outline', size: 'large' } // 匹配你需要的按钮样式
        );
      }
    };

    // 若库已加载则直接初始化，否则监听脚本加载事件
    if (window.google?.accounts?.id) {
      initGoogleButton();
    } else {
      const gsiScript = document.querySelector('script[src="https://accounts.google.com/gsi/client"]');
      if (gsiScript) {
        gsiScript.onload = initGoogleButton;
      }
    }

    // 清理函数：避免组件卸载后重复初始化
    return () => {
      window.google?.accounts?.id?.cancel();
    };
  }, []);

  return (
    <div>
      {/* 预留按钮容器 */}
      <div id="google-login-container"></div>
    </div>
  );
};

export default Login;

方案2：移除脚本的async属性（临时调试方案） #

将index.html中的GSI脚本移除async属性，强制同步加载，确保组件渲染前库已就绪：

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

注意：同步加载会阻塞页面渲染，影响首屏加载速度，不推荐作为生产环境方案。

方案3：使用封装好的React Google登录库（推荐） #

使用@react-oauth/google这类官方推荐的封装库，已内置处理脚本加载和渲染时机的逻辑：

1. 安装依赖：

npm install @react-oauth/google

2. 在项目入口文件（如index.js）配置Provider：

import { GoogleOAuthProvider } from '@react-oauth/google';
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. 在Login组件中使用按钮：

import { GoogleLogin } from '@react-oauth/google';

const Login = () => {
  const handleLoginSuccess = (response) => {
    console.log('登录成功:', response);
    // 后续登录逻辑处理
  };

  const handleLoginError = () => {
    console.log('登录失败');
  };

  return (
    <GoogleLogin
      onSuccess={handleLoginSuccess}
      onError={handleLoginError}
      theme="outline"
      size="large"
    />
  );
};

export default Login;

额外检查项 #

• 确认http://localhost:3000已正确添加到Google Cloud控制台的授权JavaScript来源；若使用授权码流程，还需添加对应重定向URI。
• 避免直接在React组件中粘贴生成的静态HTML代码，虚拟DOM和静态DOM元素的渲染时机冲突会导致此类问题。

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