Next.js出现SyntaxError: Unexpected token < in JSON at position 0错误求助

你遇到的错误本质是response.json()尝试解析非JSON内容（通常是HTML，比如404/500错误页）导致的，结合你的代码和场景，潜在原因如下：

1. 单个学生API返回非JSON内容 #

虽然列表接口/students正常，但单个学生接口/students/${params.id}可能返回HTML（比如404错误页面）。常见触发场景：

• params.id格式不符合后端要求：比如你在getStaticPaths中将d._id转为字符串，但后端期望原始的ObjectId格式（如MongoDB的ObjectId）或数字ID，导致接口找不到资源返回404 HTML。
• 后端路由定义错误：比如后端单个学生路由是/student/:id而非/students/:id，请求路径不匹配返回404。

验证方法：直接在浏览器访问http://localhost:8080/students/[真实存在的学生ID]，查看返回内容是否为JSON；也可以在getStaticProps中临时添加日志：

export async function getStaticProps({ params }) {
  const response = await fetch(`http://localhost:8080/students/${params.id}`);
  console.log('接口状态码:', response.status);
  console.log('返回原始内容:', await response.text()); // 打印返回的内容，确认是否为HTML
  const data = await response.json();
  // ...
}

2. getStaticProps存在语法错误 #

你的代码中return的props里有多余的无效字符Ｓ,，虽然不是直接导致JSON解析错误的原因，但会引发代码运行异常，建议立即删除该字符：

// 修正前
return {
  props: {
    data,
    Ｓ, // 无效字符，删除
  },
};

// 修正后
return {
  props: {
    data,
  },
};

3. ID传递过程中的格式丢失 #

如果你的d._id是MongoDB的ObjectId，toString()后会转为24位字符串，但部分后端框架可能需要将字符串重新转为ObjectId才能查询，若后端未处理字符串格式的ID，会导致查询失败返回错误HTML。

4. 服务器端临时错误 #

后端服务可能在处理单个学生请求时出现异常（如数据库查询错误），返回了包含错误信息的HTML页面而非JSON，此时需要检查后端服务的日志排查问题。

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