React组件无法识别window.Telegram.WebApp.initDataUnsafe求助

API 探路者

2026-6-20

解决React项目中window.Telegram.WebApp未定义的问题

问题还原

作为开发新手，我按照Telegram API文档在React项目的index.html头部引入了脚本：

<script src="https://telegram.org/js/telegram-web-app.js"></script>

但在App.js中调用console.log(window.Telegram.WebApp.initDataUnsafe)时，Telegram Beta调试器抛出错误：

TypeError: Cannot read properties of undefined (reading 'WebApp')

解决方案

1. 调整脚本加载位置

把Telegram的脚本移到<body>标签末尾，确保React组件初始化前脚本已加载完成：

<body>
  <div id="root"></div>
  <!-- 放在React根节点之后 -->
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
</body>

2. 在React组件中延迟访问Telegram对象

使用useEffect钩子，等待组件挂载后再去读取window.Telegram，避免因脚本未加载完成导致的错误：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    // 使用可选链操作符避免崩溃
    if (window.Telegram?.WebApp) {
      console.log(window.Telegram.WebApp.initDataUnsafe);
      // 在这里执行Telegram WebApp的初始化逻辑
    } else {
      console.warn('Telegram WebApp脚本未加载，请检查网络或脚本地址');
    }
  }, []);

  return <div>Telegram Mini App Demo</div>;
}

export default App;

3. TypeScript项目添加类型声明（可选）

如果用TypeScript，需要扩展window对象的类型声明，避免类型报错：

declare global {
  interface Window {
    Telegram: {
      WebApp: {
        initDataUnsafe: Record<string, any>;
        // 可以根据Telegram API文档补充更多属性类型
      };
    };
  }
}

export {};