React集成Google Sign In One Tap Prompt触发被动事件监听器错误

核心问题分析 #

你的代码中useEffect未设置依赖数组，导致组件每次渲染都会重复加载GSI脚本、重复初始化服务，这是引发One Tap提示无响应、点击报错的主要原因。此外，脚本加载时机和初始化逻辑的不稳定也会加剧这类问题。

具体修复步骤 #

1. 修复useEffect重复执行问题

给useEffect添加空依赖数组，确保脚本仅在组件挂载时加载一次，避免重复初始化：

useEffect(() => {
  const script = document.createElement("script");
  script.src = "https://accounts.google.com/gsi/client";
  script.onload = initializeGsi;
  script.async = true;
  script.id = "google-client-script";
  document.querySelector("body")?.appendChild(script);

  return () => {
    // 组件卸载时清理One Tap提示和脚本
    if (window.google?.accounts?.id) {
      window.google.accounts.id.cancel();
    }
    const existingScript = document.getElementById("google-client-script");
    if (existingScript) existingScript.remove();
    setGsiScriptLoaded(false);
  };
}, []); // 空依赖数组限制仅执行一次

2. 优化One Tap初始化与调用逻辑

添加延迟调用prompt()确保DOM状态稳定，同时增加外部点击关闭提示的配置：

const initializeGsi = () => {
  if (!window.google || gsiScriptLoaded) return;

  setGsiScriptLoaded(true);
  window.google.accounts.id.initialize({
    client_id: GOOGLE_ID,
    callback: handleGoogleSignIn,
    auto_select: false,
    cancel_on_tap_outside: true, // 点击提示外部自动关闭
  });

  // 确保按钮容器存在再渲染登录按钮
  if (googleSignInButton.current) {
    window.google.accounts.id.renderButton(googleSignInButton.current, { type: "icon" });
  }

  // 延迟触发提示，避免DOM未就绪导致的异常
  setTimeout(() => {
    window.google?.accounts.id.prompt((notification) => {
      // 可选：监听提示状态，便于调试
      if (notification.isNotDisplayed()) {
        console.log("One Tap提示无法显示");
      }
    });
  }, 100);
};

3. 稳定回调函数

用useCallback包裹登录回调，避免每次渲染创建新函数导致的绑定异常：

import { useCallback } from 'react';

// ...

const handleGoogleSignIn = useCallback(async (res) => {
  if (!res.clientId || !res.credential) return;

  const gToken = res.credential;
  try {
    // 此处替换为你的服务器会话创建和跳转逻辑
    // await fetch('/api/auth/google', {
    //   method: 'POST',
    //   body: JSON.stringify({ token: gToken })
    // });
    // window.location.href = '/dashboard';
  } catch (err) {
    console.error("Google登录失败:", err);
  }
}, []);

4. 缓解被动事件监听器警告

虽然错误来自GSI库本身，但可以通过全局CSS减少这类警告（针对移动端触摸场景）：

/* 全局样式文件中添加 */
.gsi-material-button, .g_id_signin, .gsi-prompt-box {
  touch-action: none;
}

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