React应用报错：window.functionFromThirdParty不是函数，如何解决？

报错Uncaught TypeError: window.functionFromThirdParty is not a function本质是调用时该函数还未挂载到window对象，或根本不存在，以下是针对性解决方案：

1. 确认第三方脚本加载顺序与时机 #

如果第三方脚本是在React组件之后加载的（比如脚本标签放在body末尾但组件先渲染），组件执行useEffect时函数还未初始化。

解决方法： #

• 调整脚本加载位置：将第三方脚本标签放在head中并添加defer（确保DOM解析完成后执行，但早于React组件渲染）：

  <script src="third-party-script.js" defer></script>
  

• 动态加载脚本并在加载完成后调用函数：如果无法调整脚本位置，在组件内动态加载脚本，监听加载完成事件：

  useEffect(() => {
    // 先检查是否已加载
    if (window.functionFromThirdParty) {
      window.functionFromThirdParty();
      return;
    }
  
    const script = document.createElement('script');
    script.src = 'third-party-script.js';
    script.onload = () => {
      window.functionFromThirdParty?.();
    };
    script.onerror = () => {
      console.error('第三方脚本加载失败');
    };
    document.body.appendChild(script);
  
    return () => {
      document.body.removeChild(script);
    };
  }, [id]);
  

2. 添加安全校验，避免直接调用 #

即使脚本加载正常，也可能存在函数未正确挂载的情况，调用前先做判断：

useEffect(() => {
  // 类型判断+安全调用
  if (typeof window.functionFromThirdParty === 'function') {
    window.functionFromThirdParty();
  } else {
    console.error('functionFromThirdParty 未定义或不是函数');
  }
}, [id]);

3. 排查函数命名与挂载问题 #

• 检查函数名拼写是否完全匹配（注意大小写、下划线等），比如第三方脚本是否实际挂载的是window.FunctionFromThirdParty（首字母大写）。
• 在浏览器控制台直接输入window.functionFromThirdParty，查看返回值：如果是undefined说明脚本没加载或没挂载；如果是其他类型（比如对象），说明函数名错误或需要通过命名空间访问（比如window.thirdParty.functionFromThirdParty）。

4. 处理服务端渲染（SSR）场景 #

如果使用Next.js、Gatsby等SSR框架，服务端执行时不存在window对象，需先判断是否在浏览器环境：

useEffect(() => {
  if (typeof window !== 'undefined') {
    if (typeof window.functionFromThirdParty === 'function') {
      window.functionFromThirdParty();
    }
  }
}, [id]);

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