在React应用嵌入HubSpot表单时解决‘Cannot find name 'hbspt'’错误

以下是两种可行的解决方式：

方式一：添加全局类型声明（推荐） #

在项目根目录下创建或修改globals.d.ts文件，添加针对hbspt的全局类型定义，让TypeScript识别这个全局对象，同时还能获得类型提示：

declare global {
  interface Window {
    hbspt: {
      forms: {
        create: (config: {
          portalId: string;
          formId: string;
          target: string;
          // 可根据需求添加其他可选配置字段，比如redirectUrl、cssClass等
        }) => void;
      };
    };
  }
}

export {};

之后你的代码就可以去掉@TS-ignore注释，正常使用window.hbspt了。

方式二：使用类型断言快速解决 #

如果不想创建类型文件，可以直接在代码中对window进行类型断言，临时绕过TypeScript的类型检查：

import { useEffect } from 'react';

useEffect(() => {
  const script = document.createElement("script");
  script.src = "//js-eu1.hsforms.net/forms/embed/v2.js";
  document.body.appendChild(script);

  script.addEventListener("load", () => {
    const hbspt = (window as any).hbspt;
    if (hbspt) {
      hbspt.forms.create({
        portalId: "YOUR_PORTAL_ID_HERE",
        formId: "YOUR_FORM_ID_HERE",
        target: "#hubspotForm",
      });
    }
  });
}, []);

这种方式操作简单，但无法获得类型检查和自动提示，适合临时场景。

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