這狀況在 Google Apps Script 開發很常見,通常不是程式寫錯,而是「環境」或「設定」的小問題。我們分幾個方向來檢查。
檢查部署版本
這是最容易踩的坑。GAS 的 Web App 有兩種網址:
- 正式版 (網址結尾是
exec):這只會執行你「最後一次發布」的程式碼。如果你改了 Code 只有存檔,沒重新發布「新版本」,網頁看到的永遠是舊的,當然讀不到新寫好的功能。 - 測試版 (網址結尾是
dev):這會即時反映你最新的程式碼。
建議開發時用測試版網址確認,確認沒問題後,再去「管理部署」建立一個新版本推送到正式版。
檢查試算表分頁名稱
看你的程式碼這一段:
let sheet = ss.getSheetByName(‘Photos’);
程式指定要讀取名叫 Photos 的分頁。請回到你的 Google Sheet 確認:
- 存放資料的分頁名稱,是否真的叫
Photos(大小寫要完全一樣)。 - 如果你的資料原本在
工作表1或Sheet1,程式會因為找不到Photos,自動新建一個空白的Photos分頁,然後讀取那個空白分頁,結果當然是空的。 - 如果是這種情況,請把資料複製到
Photos分頁,或修改程式碼中的名稱。
程式碼邏輯防呆
有時候 Sheet 會有「看起來是空行」但其實被視為有資料的列,這會讓迴圈讀到空值導致前端出錯。建議修改 code.gs 的 getPhotoData 函式,增加一個判斷,確保有 ID 才加入資料。
你可以用這段取代原本的 getPhotoData:
JavaScript
function getPhotoData() {
const sheet = getOrCreatePhotosSheet_();
// 這裡加一個判斷,如果完全沒資料就回傳空陣列,避免報錯
if (sheet.getLastRow() <= 1) {
return [];
}
const rows = sheet.getDataRange().getValues();
const data = [];
for (let i = 1; i < rows.length; i++) {
const row = rows[i];
// 新增防呆:如果該行的 ID (第0欄) 是空的,就跳過不處理
if (!row[0] || row[0] === "") continue;
data.push({
id: row[0],
timestamp: row[1],
title: row[2],
desc: row[3],
tags: row[4],
imageId: row[5],
url: row[6]
});
}
return data.reverse();
}
瀏覽器端除錯
如果上面都改了還是沒畫面,請依序做這兩個動作:
- 打開你的網頁。
- 按鍵盤 F12 (或右鍵 -> 檢查),點選上方分頁的 Console。
- 看看有沒有紅色的錯誤訊息。
如果有看到類似 Cannot read property '...' of null 的錯誤,通常代表資料庫欄位跟前端要讀取的欄位對不上。目前你的程式碼前後端對應看起來是沒問題的,最該懷疑的就是「分頁名稱不對」導致讀到空資料。
下一動作:請先確認你的 Sheet 分頁名稱是不是 Photos。