Next.js特定路由无法正常显示Google Sheets获取的数据该如何解决？

问题原因 #

• getDataFromSheets 是异步函数，你在API路由dynamicid.js中调用时未添加await关键字，直接获取到的是Pending状态的Promise对象，无法正常读取数据
• getDataFromSheets 方法返回值是对象数组，不是单个对象，直接解构{item, description}属于语法错误，数组本身不存在这两个属性
• 若你想实现的是前端页面路由而非后端接口，不要将文件放在pages/api目录下，该目录为Next.js预留的API路由专属目录，访问路径会自动带/api前缀，不会渲染前端页面

修复方案 #

如果你需要的是后端接口

将dynamicid.js代码修改为：

import { getDataFromSheets } from "../../libs/sheets"
    
export default async function handler(req, res) {
  try {
    // 添加await等待异步请求完成
    const dataList = await getDataFromSheets();
    // 如需返回单条数据，可根据传入的参数从dataList中过滤
    res.status(200).json({ dataList })
  } catch (err) {
    res.status(500).json({ error: '获取数据失败' })
  }
}

修改后访问/api/dynamicid即可拿到完整的表格数据。

如果你需要的是前端动态页面路由

1. 将动态路由文件从pages/api目录移动到pages目录下，如需支持动态ID参数可将文件名改为[id].js
2. 页面写法参考index.js，使用getStaticProps+getStaticPaths获取数据渲染页面，示例代码如下：

import { getDataFromSheets } from "../libs/sheets"

export default function DynamicPage({ item }) {
  return (
    <div>
      <h1>{item.title}</h1>
      <p>{item.description}</p>
    </div>
  )
}

export async function getStaticPaths() {
  const dataList = await getDataFromSheets()
  const paths = dataList.map((item, index) => ({
    params: { id: index.toString() }
  }))
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  const dataList = await getDataFromSheets()
  const item = dataList[parseInt(params.id)]
  return {
    props: { item },
    revalidate: 1
  }
}

额外检查项 #

• 确认项目根目录下.env.local文件中三个环境变量GOOGLE_SHEETS_CLIENT_EMAIL、GOOGLE_SHEETS_PRIVATE_KEY、SPREADSHEET_ID配置正确
• 确认你使用的Google Sheet已经给服务账号邮箱开通了至少只读权限

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