Google Apps Script中HTML与后端数据传递及页面ID复用问题

1. 后端修改：跨请求存储ID #

首先修改dataServerSide.gs的代码，把接收的ID存储到Script Properties（可跨请求共享的持久化存储），同时新增获取ID的函数：

function makeRequest(data){
  // 将ID存入Script Properties
  PropertiesService.getScriptProperties().setProperty("selectedProjectId", data);
  console.log("已存储项目ID: " + data);
  return data;
}

// 新增：获取已存储的项目ID
function getSelectedProjectId(){
  return PropertiesService.getScriptProperties().getProperty("selectedProjectId") || "";
}

2. Main.html：优化行点击逻辑（添加跳转回调） #

保留原行点击逻辑，建议加上成功回调确认ID传递，并跳转到ProjectDetail页面：

elements.table.on("rowClick", function(e, row){
    const ID = row._row.data.ID;
    google.script.run
      .withSuccessHandler((response) => {
        console.log("ID已同步到后端: " + response);
        // 跳转到项目详情页（根据你的页面路由调整）
        window.location.href = "ProjectDetail.html";
      })
      .makeRequest(ID);
});

3. ProjectDetail.html：异步获取ID并渲染表格 #

核心是处理google.script.run的异步特性，不要同步赋值，而是在成功回调中执行后续逻辑：

// 页面加载完成后自动执行
window.addEventListener('DOMContentLoaded', () => {
  retrieveIdAndRenderTable();
});

function retrieveIdAndRenderTable(){
  google.script.run
    .withSuccessHandler((incomingId) => {
      if(!incomingId){
        console.error("未获取到有效项目ID");
        return;
      }
      // 拿到ID后，调用后端接口加载数据并渲染表格
      loadProjectData(incomingId);
    })
    .withFailureHandler((error) => {
      console.error("获取ID失败: ", error);
    })
    .getSelectedProjectId();
}

function loadProjectData(ID){
  google.script.run
    .withSuccessHandler((projectDetails) => {
      // 用Tabulator渲染表格（替换成你的表格容器ID和列配置）
      new Tabulator("#project-detail-table", {
        data: projectDetails,
        columns: [
          {title: "项目名称", field: "name"},
          {title: "项目ID", field: "ID"},
          // 其他列配置
        ]
      });
    })
    .findProjectDetailsById(ID);
}

错误原因说明 #

1. 异步操作导致初始化错误：google.script.run是异步执行的，你原代码中retrieveId直接return ID，但此时异步回调还没完成，ID未被赋值，所以触发初始化错误。必须在withSuccessHandler中处理拿到数据后的逻辑。
2. 数据未跨请求存储：原后端函数仅返回ID但未持久化，ProjectDetail页面调用时无法获取之前传递的ID，需要用Script Properties或缓存服务实现跨页面数据共享。

可选优化：临时缓存ID #

如果不需要持久化ID（关闭页面后失效），可以用Cache Service替代Script Properties：

// 后端代码修改
function makeRequest(data){
  const cache = CacheService.getScriptCache();
  cache.put("selectedProjectId", data, 3600); // 缓存1小时
  console.log("已缓存项目ID: " + data);
  return data;
}

function getSelectedProjectId(){
  const cache = CacheService.getScriptCache();
  return cache.get("selectedProjectId") || "";
}

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