在NextJS中用TypeScript定时向Body追加脚本的问题

一、解决TypeScript类型错误 #

你遇到的核心问题是JSX.Element是React虚拟DOM对象，无法直接作为真实DOM节点追加到document.body，TypeScript会因类型不匹配抛出错误。正确做法是直接创建原生DOM的script元素，而非JSX元素：

// 创建原生script节点（符合Node类型要求）
const podiumScript = document.createElement('script');
podiumScript.src = 'https://connect.podium.com/widget.js#API_TOKEN=5bd8dac4-3041-4f32-a378-e8cd53634bbb';
podiumScript.id = 'podium-widget';

// 延迟5秒追加到页面body
window.setTimeout(() => {
  document.body.appendChild(podiumScript);
}, 5000);

这种方式生成的是真实的HTMLScriptElement，完全匹配document.body.append()接受的参数类型，TypeScript不会再报错。

二、Podium官方延迟加载方案 #

除了手动定时器加载，Podium聊天小部件本身支持两种更优雅的延迟加载方式：

1. data-lazy自动延迟加载
   给script标签添加data-lazy属性，小部件会自动在页面滚动或用户交互时触发加载（如果需要更精确的时机，仍建议手动控制）：

<script 
  src="https://connect.podium.com/widget.js#API_TOKEN=你的令牌"
  id="podium-widget"
  data-lazy
></script>

2. 手动调用初始化方法
   先引入禁用自动加载的script（添加data-no-auto-load属性），再在需要的时机手动触发初始化：

// 第一步：添加不带自动加载的script
const podiumScript = document.createElement('script');
podiumScript.src = 'https://connect.podium.com/widget.js#API_TOKEN=你的令牌';
podiumScript.id = 'podium-widget';
podiumScript.setAttribute('data-no-auto-load', 'true');
document.body.appendChild(podiumScript);

// 第二步：延迟5秒手动初始化
window.setTimeout(() => {
  if (window.PodiumWidget) {
    window.PodiumWidget.load();
  }
}, 5000);

这种方式能完全掌控小部件的加载时机，适合需要更长延迟的场景。

三、NextJS场景补充 #

如果你使用NextJS，可结合useEffect钩子执行延迟逻辑，避免服务端渲染时触发DOM操作：

import { useEffect } from 'react';

export default function YourPage() {
  useEffect(() => {
    const loadPodium = () => {
      const podiumScript = document.createElement('script');
      podiumScript.src = 'https://connect.podium.com/widget.js#API_TOKEN=你的令牌';
      podiumScript.id = 'podium-widget';
      document.body.appendChild(podiumScript);
    };

    const timer = setTimeout(loadPodium, 5000);
    return () => clearTimeout(timer); // 组件卸载时清除定时器
  }, []);

  return <div>你的页面内容</div>;
}

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