NextJS 14+TypeScript嵌入GameChanger脚本报错求助

核心原因 #

报错本质是初始化代码早于GameChanger SDK加载完成，导致window.GameChanger未定义，无法调用scoreboard方法。

解决方案步骤 #

1. 正确使用Next.js Script组件加载SDK #

用Script组件的onLoad回调确保SDK加载完成后再执行初始化代码，同时指定加载策略为afterInteractive（或lazyOnload，根据需求选择），避免阻塞页面渲染：

'use client'; // NextJS 14 App Router下需显式声明客户端组件

import Script from 'next/script';

export default function GameChangerScoreboard() {
  const initScoreboard = () => {
    // 替换为你的官方初始化配置
    window.GameChanger.scoreboard({
      gameId: '你的游戏ID',
      elementId: 'gc-scoreboard-container',
      // 补充其他官方配置项
    });
  };

  return (
    <>
      <div id="gc-scoreboard-container"></div>
      <Script
        src="https://widgets.gc.com/widgets/sdk.js"
        strategy="afterInteractive"
        onLoad={initScoreboard}
      />
    </>
  );
}

2. 添加TypeScript类型声明 #

避免TS报错window.GameChanger不存在，在项目根目录新建types/global.d.ts文件（已有则直接编辑），添加类型声明：

interface Window {
  GameChanger: {
    scoreboard: (config: {
      gameId: string;
      elementId: string;
      // 补充你用到的其他配置项类型
    }) => void;
  };
}

3. 兜底方案：手动加载脚本并检查 #

如果上述方法仍有问题，可手动创建脚本元素，确保加载完成后再执行初始化，同时增加存在性检查：

'use client';

import { useEffect } from 'react';

export default function GameChangerScoreboard() {
  useEffect(() => {
    const loadSDKAndInit = async () => {
      const script = document.createElement('script');
      script.src = 'https://widgets.gc.com/widgets/sdk.js';
      script.async = true;

      await new Promise((resolve) => {
        script.onload = resolve;
        document.body.appendChild(script);
      });

      // 检查GameChanger实例存在后再初始化
      if (window.GameChanger?.scoreboard) {
        window.GameChanger.scoreboard({
          gameId: '你的游戏ID',
          elementId: 'gc-scoreboard-container',
        });
      }
    };

    loadSDKAndInit();

    // 可选：组件卸载时清理脚本
    return () => {
      const targetScript = document.querySelector('script[src="https://widgets.gc.com/widgets/sdk.js"]');
      if (targetScript) targetScript.remove();
    };
  }, []);

  return <div id="gc-scoreboard-container"></div>;
}

注意事项 #

• 确保elementId对应的DOM容器在SDK初始化前已经渲染完成，不要用条件渲染隐藏该容器，或在容器存在后再执行初始化逻辑。
• 核对GameChanger官方提供的SDK地址，避免加载错误资源。

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