Next.js对接Google Sheets时getStaticProps返回值序列化错误如何修复？

报错原因 #

这个报错是因为Next.js要求getStaticProps返回的所有props必须是可序列化为纯JSON的类型，不能包含undefined、函数、类实例等非JSON兼容的值。你当前返回的data数组中第5项（索引为4）的description字段值为undefined，原因是Google Sheets对应行的第二列单元格为空，读取到的row[1]为undefined，触发了序列化报错。

修复方案 #

• 1. 给返回的字段添加空值兜底，避免出现undefined
     修改sheet.js中处理行数据的逻辑：

if (rows.length) {
  return rows.map((row) => ({
    title: row[0] || '', // 空值自动替换为空字符串
    description: row[1] || '', // 解决undefined导致的序列化报错
  }));
}

• 2. 修复React列表的Key值错误
     你当前代码直接用item对象作为列表项的key，不符合React规范，会引发额外运行时报错，修改index.js中的列表渲染逻辑：

data.map((item, index) => (
  <li key={`${item.title}-${index}`}>
    {item.title} - {item.description}
  </li>
))

• 3. （可选）移除不必要的自动追加数据逻辑
     你当前的getDataFromSheets函数每次调用都会自动往表格末尾追加一行['Vikas,Vikas Adeed']，如果这不是你的预期功能，建议删除values.append相关的代码，避免表格内产生大量无意义数据，进一步减少空字段出现的概率。

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