Google Sheet侧边栏表单调用creeID()返回null问题求助

问题描述 #

在Google Sheet中搭建侧边栏表单，用于向PREUVES工作表添加数据，需要为每行生成唯一ID。单独测试服务器端的creeID()函数可正常生成新ID，但通过google.script.run.withSuccessHandler()调用时返回null，导致无法构造正确数组写入工作表。

问题根源 #

google.script.run是异步操作，直接将其调用结果放入数组时，代码不会等待服务器返回ID就执行后续逻辑，此时数组中的ID值为undefined（表现为null），后续提交自然出错。

修复方案 #

将所有依赖ID的操作（构造数组、字段验证、提交数据）放到withSuccessHandler的回调函数中，确保拿到服务器返回的ID后再执行后续步骤。

修改后的HTML代码（核心调整<script>部分）

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      ...
    </style>
  </head>
  <body>
    <p>Indicateur</p>
    <input type="number" name="indicateur" id="indic" value="" min = "1" max = "32">
    <p>Preuve</p>
    <input type="text" name="preuve" id="preuve">
    <br>
    <input type="button" value="Ajouter" onclick="ajouter()">
    <span class="annuler" onclick="google.script.host.close()">Annuler</span>

    <script>
      function ajouter() {
        const inputs = document.querySelectorAll('#indic, #preuve');
        // 提前获取表单值（同步操作，不影响逻辑）
        const formValues = Array.from(inputs).map(input => input.value);
        
        // 先验证表单是否为空，避免无效服务器调用
        if (formValues.join('') === '') {
          alert('Le formulaire est vide !');
          return;
        }

        // 异步调用creeID，拿到ID后再处理后续逻辑
        google.script.run.withSuccessHandler(newId => {
          // 构造包含ID的完整数据数组
          const tab = [newId, ...formValues];
          
          // 清空表单字段
          inputs.forEach(input => input.value = '');
          
          // 提交数据到工作表
          google.script.run.ajouterLigne(tab);
          alert("preuve ajoutée");
        }).creeID();
      }
    </script>
  </body>
</html>

Google Apps Script代码（可保留原逻辑，或优化空表兼容）

原creeID()逻辑正常，若要兼容空表（仅表头无数据的情况），可微调：

function ajouterLigne(tab) {
  const PREUVES = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("PREUVES");
  console.log(tab);
  PREUVES.appendRow(tab);
}

function creeID() {
  const SHEET = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("PREUVES");
  let lastRow = SHEET.getLastRow();
  let lastId;
  
  // 处理空表（仅表头行）的情况
  if (lastRow === 1) {
    lastId = "ID";
  } else {
    let lastIdRange = SHEET.getRange(lastRow, 1);
    lastId = lastIdRange.getValue(); 
  }

  let newId = lastId === "ID" ? 1 : lastId + 1;
  return newId;
}

关键调整说明 #

1. 异步逻辑顺序：先验证表单字段，再调用服务器获取ID，避免无效请求
2. 回调内处理：所有依赖ID的操作都放在withSuccessHandler的回调中，确保ID已成功获取
3. 表单值提前获取：表单值为同步获取，提前拿到可减少回调内代码量，逻辑更清晰

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