NextJS中使用useGoogleOneTapLogin钩子遇多类错误求助

问题根源 #

你的三个错误本质上都是Next.js服务端渲染(SSR)特性与React Hooks规则的冲突：

• window is not defined：服务端没有window对象，直接调用钩子时会在SSR阶段执行到依赖window的代码
• 条件调用钩子报错：违反React Hooks必须在组件顶层按固定顺序调用的规则
• useEffect内调用钩子报错：Hooks只能在函数组件的顶层作用域调用，不能嵌套在其他钩子或函数内

解决方案：客户端专属组件+动态导入 #

将Google One Tap登录逻辑封装到仅客户端渲染的组件中，通过Next.js的动态导入禁用SSR，彻底规避服务端环境的限制，同时符合Hooks调用规则。

步骤1：创建客户端登录组件 #

新建GoogleOneTapLogin.js，在组件顶层正常调用钩子：

import { useGoogleOneTapLogin } from 'react-google-one-tap-login';

export default function GoogleOneTapLogin() {
  // 直接在组件顶层调用钩子，无需条件判断
  useGoogleOneTapLogin({
    clientId: '你的Google客户端ID',
    onSuccess: (response) => {
      // 处理登录成功逻辑，比如将id_token发送到后端验证
      console.log('登录成功:', response.credential);
    },
    onError: (error) => {
      console.error('登录失败:', error);
    },
    // 可选配置：控制弹窗显示时机、样式等
    promptParentId: 'login-container',
  });

  return (
    <div id="login-container">
      <p>或使用Google账号登录</p>
    </div>
  );
}

步骤2：在主组件中动态导入 #

使用Next.js的dynamic方法导入上述组件，设置ssr: false确保仅在客户端加载：

import dynamic from 'next/dynamic';

// 禁用SSR，组件仅在浏览器环境渲染
const GoogleOneTapLogin = dynamic(() => import('./GoogleOneTapLogin'), {
  ssr: false,
  loading: () => <div>加载中...</div>,
});

export default function LoginPage() {
  return (
    <div className="login-page">
      <h1>用户登录</h1>
      {/* 其他登录方式表单 */}
      <GoogleOneTapLogin />
    </div>
  );
}

备选方案：手动加载Google脚本（无需依赖第三方库） #

如果不想使用第三方库，可直接通过useEffect加载Google官方脚本并初始化One Tap，完全规避钩子调用问题：

import { useEffect } from 'react';

export default function GoogleLogin() {
  useEffect(() => {
    // 加载Google One Tap官方脚本
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    script.async = true;
    script.defer = true;
    script.onload = initOneTap;
    document.body.appendChild(script);

    function initOneTap() {
      // 初始化Google One Tap
      window.google.accounts.id.initialize({
        client_id: '你的Google客户端ID',
        callback: (response) => {
          console.log('登录凭证:', response.credential);
          // 后续验证逻辑
        },
      });
      // 触发弹窗
      window.google.accounts.id.prompt();
    }

    // 组件卸载时清理脚本
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>等待Google登录弹窗...</div>;
}

同样通过动态导入ssr: false的方式在主组件中使用该组件即可。

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