Google Apps Script中Telegram WebApp initData为空且MainButton点击失效求助

一、initData/initDataUnsafe为空的解决办法 #

• 核心原因：Telegram仅在从Bot的Inline Button打开WebApp时传递初始化数据，直接在浏览器访问GAS部署URL不会携带这些数据；同时GAS默认不会主动将Telegram传来的initData参数传递给前端页面。
• 解决步骤：
  1. 通过Bot的Inline Button打开WebApp：
     构造Bot的Inline Keyboard，按钮类型设为web_app，指定WebApp的URL为你的GAS部署地址，Telegram会自动在URL后拼接initData参数。
  2. 在GAS的doGet函数中接收并传递initData：
     修改GAS服务器端代码，获取请求中的initData参数，注入到前端页面的Telegram WebApp初始化流程中。示例代码：

     function doGet(e) {
       const initData = e.parameter.initData || '';
       const template = HtmlService.createTemplateFromFile('index');
       template.initData = initData; // 将initData传递给HTML模板
       return template.evaluate()
         .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL); // 允许Telegram嵌入页面
     }
     

  3. 前端页面初始化Telegram WebApp的initData：
     在前端脚本中，利用模板变量设置initData，确保WebApp能解析出用户信息：

     <script>
       window.Telegram.WebApp.initData = '<?= initData ?>';
       window.Telegram.WebApp.ready();
       window.Telegram.WebApp.expand();
       
       // 现在可正常获取用户ID
       const userId = window.Telegram.WebApp.initDataUnsafe.user?.id;
     </script>
     

二、MainButton.onClick事件不触发的解决办法 #

• 核心原因：你的代码存在语法错误（最后一行JSON.stringify(window.Telegram.WebA)未完成），导致脚本中断；另外直接赋值isProgressVisible的方式不符合官方API规范。
• 解决步骤：
  1. 修复语法错误：补全未完成的代码行，比如改为JSON.stringify(window.Telegram.WebApp)。
  2. 正确设置MainButton进度状态：使用官方提供的setProgressVisible()方法替代直接赋值属性：

     // 替代 window.Telegram.WebApp.MainButton.isProgressVisible = "true"
     window.Telegram.WebApp.MainButton.setProgressVisible(true);
     

  3. 调整代码顺序确保事件绑定生效：将onClick事件绑定放在MainButton初始化完成后，逻辑更清晰：

     const mainButton = window.Telegram.WebApp.MainButton;
     mainButton.setText('submit');
     mainButton.showProgress();
     mainButton.setProgressVisible(true);
     mainButton.enable();
     mainButton.show();
     // 绑定点击事件
     mainButton.onClick(() => {
       alert('submitted');
       // 可在此处处理用户ID逻辑
       const userId = window.Telegram.WebApp.initDataUnsafe.user.id;
       google.script.run.handleUserSubmit(userId);
     });
     

修改后的完整代码 #

GAS服务器端（Code.gs） #

function doGet(e) {
  const initData = e.parameter.initData || '';
  const template = HtmlService.createTemplateFromFile('index');
  template.initData = initData;
  return template.evaluate()
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

// 可选：处理前端提交的用户ID
function handleUserSubmit(userId) {
  console.log('用户ID:', userId);
  // 可添加存储用户ID到Google Sheet等逻辑
}

前端页面（index.html） #

<!DOCTYPE html>
<html>
<head>
  <script src="https://telegram.org/js/telegram-web-app.js"></script>
  <base target="_self">
</head>
<body>
  <div class="container">
    <h1>My Title</h1>
    <div class="row" id="tg"></div>
    <div class="row">
      <button id="btn">all_inclusive</button>
    </div>
  </div>
  <script>
    // 初始化Telegram WebApp的initData
    window.Telegram.WebApp.initData = '<?= initData ?>';
    window.Telegram.WebApp.ready();
    window.Telegram.WebApp.expand();

    // 获取并渲染用户ID
    const initDataUnsafe = window.Telegram.WebApp.initDataUnsafe;
    if (initDataUnsafe.user) {
      document.getElementById('tg').innerHTML = `用户ID: ${initDataUnsafe.user.id}`;
    } else {
      document.getElementById('tg').innerHTML = '无法获取用户信息，请从Telegram内部打开页面';
    }

    // 初始化MainButton
    const mainButton = window.Telegram.WebApp.MainButton;
    mainButton.setText('submit');
    mainButton.showProgress();
    mainButton.setProgressVisible(true);
    mainButton.enable();
    mainButton.show();

    // 绑定点击事件
    mainButton.onClick(() => {
      alert('submitted');
      if (initDataUnsafe.user) {
        google.script.run.handleUserSubmit(initDataUnsafe.user.id);
      }
    });
  </script>
</body>
</html>

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