Next.js 13+TypeScript嵌入HubSpot在线聊天：页面导航后不显示问题

问题根源 #

单页应用（SPA）切换页面时不会重新加载整个文档，HubSpot的聊天初始化脚本仅在首次加载Help页面时执行一次。当你从其他页面返回时，脚本未重新触发，导致聊天组件无法重新渲染。

具体解决方案 #

1. 封装可复用的初始化函数 #

把聊天组件的初始化逻辑写成可重复调用的函数，确保每次进入Help页面都能重新执行：

function initHubSpotChat() {
  // 移除已存在的HubSpot脚本，避免重复加载冲突
  const oldScript = document.querySelector('script[src="https://js.hs-scripts.com/你的专属ID.js"]');
  if (oldScript) oldScript.remove();

  // 插入新的初始化脚本
  const newScript = document.createElement('script');
  newScript.src = "https://js.hs-scripts.com/你的专属ID.js";
  newScript.async = true;
  document.body.appendChild(newScript);

  // 手动触发聊天组件刷新（部分场景可用）
  if (window.hsConversations) {
    window.hsConversations.refresh();
  }
}

2. 绑定页面进入钩子执行初始化 #

根据你使用的框架，在Help页面的进入触发点调用上面的函数：

• React（React Router）：监听路由变化，进入Help页面时执行

import { useLocation } from 'react-router-dom';

function HelpPage() {
  const location = useLocation();

  useEffect(() => {
    initHubSpotChat();
  }, [location.pathname]); // 路径切换时重新执行

  return <div>Help页面内容</div>;
}

• Vue：利用页面挂载和激活钩子（如果用KeepAlive缓存页面）

<script setup>
import { onMounted, onActivated } from 'vue';

onMounted(() => initHubSpotChat());
onActivated(() => initHubSpotChat());
</script>

3. 可选：页面离开时清理实例 #

如果返回时旧的聊天DOM残留，可在离开Help页面时清理，避免内存泄漏：

function cleanHubSpotChat() {
  if (window.hsConversations) {
    window.hsConversations.destroy();
  }
}

在页面离开钩子中调用这个函数即可。

注意事项 #

• 替换代码中的你的专属ID.js为你实际的HubSpot脚本地址
• 优先尝试hsConversations.refresh()方法，无需重新加载脚本，更高效

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