Google Sheets珠宝录入表单报TypeError: Cannot read property 'ID' of undefined

核心报错触发逻辑：前端调用未正常传参，导致服务端addNewRow函数收到的rowData为undefined，读取其ID属性时触发空值读取错误

已定位的具体问题点 #

• 最关键语法错误：原前端JS中调用Google Script API的语句为google.script,run.withSuccessHandler(afterSubmit).addNewRow(rowData);，script与run之间的连接符错写为逗号，直接导致整个API调用完全失效，前端构造的rowData根本没有传递到服务端函数，服务端收到的入参为空。
• 非标准HTML写法：原页面<head>闭合标签后多打了英文句点</head>.，虽然浏览器容错机制可正常渲染页面，但属于违规代码，易引发后续加载异常。
• 逻辑不完善点：
  • 提交成功后的表单重置逻辑仅清空ID输入框，其余字段内容会残留，后续提交易带入无效脏数据
  • 服务端addNewRow函数没有入参防护，一旦前端调用链路异常，会直接触发同类空值报错

修复代码片段 #

前端交互代码修复 #

function afterButtonClicked(){
  const ID = document.getElementById("input-IDtag");
  const Description = document.getElementById("input-Descriptiontag");
  const Color = document.getElementById("input-Colortag");
  const Num = document.getElementById("input-Numtag");
  const Stock = document.getElementById("input-Stocktag");
  const Orderers = document.getElementById("input-Ordererstag");
  const rowData = {
    ID: ID.value,
    Description: Description.value,
    Color: Color.value,
    Num: Num.value,
    Stock: Stock.value,
    Orderers: Orderers.value
  };
  // 修复：将原错误的逗号改为点号，符合Google Script API调用语法
  google.script.run.withSuccessHandler(afterSubmit).addNewRow(rowData); 
}

function afterSubmit(){
  // 修复：提交成功后重置所有输入框，避免内容残留
  const allInputs = document.querySelectorAll(".container input");
  allInputs.forEach(input => input.value = "");
}

document.getElementById("mainButton").addEventListener("click", afterButtonClicked);

HTML结构修复 #

将原错误的带句点的闭合标签</head>.修改为标准写法</head>，移除冗余符号。

服务端函数防护增强 #

function addNewRow(rowData) {
  // 增加非空校验，入参无效时直接返回错误提示，不执行后续表格写入逻辑
  if(!rowData || typeof rowData !== "object") {
    console.error("addNewRow 收到无效入参：", rowData);
    return false;
  }
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const ws = ss.getSheetByName("Interface");
  ws.appendRow([rowData.ID,rowData.Description,rowData.Color,rowData.Num,rowData.Stock,rowData.Orderers]);
  return true;
}

验证流程 #

• 保存所有修改后的脚本代码，重新打开Google Sheets触发onOpen自动加载菜单
• 打开侧边栏表单，填入测试库存信息，点击ADD按钮
• 检查Interface工作表是否正常追加对应行数据
• 打开浏览器开发者工具的控制台面板，确认无残留报错

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