如何在React+TypeScript中成功引入Google GSI并解决相关报错？

步骤1：在HTML中引入GSI脚本 #

在项目入口HTML文件（如public/index.html）中添加脚本，异步加载避免阻塞页面：

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

步骤2：安装官方类型声明包 #

google-one-tap仅为类型声明包，需单独安装以获得TypeScript语法支持：

npm install @types/google-one-tap --save-dev

步骤3：在React组件中使用全局google对象 #

通过window.google访问GSI API，结合React生命周期钩子初始化登录功能：

import { useEffect } from 'react';

const GoogleLoginButton = () => {
  useEffect(() => {
    // 确保脚本加载完成后再执行初始化
    if (!window.google) return;

    window.google.accounts.id.initialize({
      client_id: '你的Google客户端ID',
      callback: (credentialResponse) => {
        // 处理登录成功后的凭证
        console.log('登录凭证:', credentialResponse);
      }
    });

    // 渲染登录按钮
    window.google.accounts.id.renderButton(
      document.getElementById('google-login-container'),
      { theme: 'filled_blue', size: 'large', text: 'signin_with' }
    );
  }, []);

  return <div id="google-login-container"></div>;
};

export default GoogleLoginButton;

步骤4：完善全局类型提示（可选） #

如果window.google未自动获得类型提示，在项目global.d.ts文件中添加声明：

interface Window {
  google: typeof import('google-one-tap');
}

关于你之前尝试方案的问题说明 #

• 直接导入google-one-tap报错：该包仅包含类型定义，无运行时代码，无法作为普通模块导入使用
• 从URL导入模块报错：多数React项目的打包工具（如Webpack）不支持静态导入外部URL模块，此方式不适用于传统项目配置

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