NextJS请求数据URL出现[object%20Object]报404错误的解决方法

接口路径中出现[object%20Object]是典型的参数类型错误：拼接请求URL时，本该传入字符串/数字类型新闻ID的位置，实际传入了一个JavaScript对象。对象隐式转换为字符串时固定输出[object Object]，经URL编码后就是控制台看到的[object%20Object]，后端不存在匹配路径因此返回404状态码。

结合Next.js项目的常见开发场景，触发该问题的高频原因：

• 动态路由参数取值错误：直接将params（App Router）或router.query（Pages Router）整个对象作为ID传入请求，没有读取对象下对应的ID字段
• 列表传参错误：从新闻列表跳详情时，误将整条新闻数据对象作为ID传入，没有读取对象的ID属性
• 状态赋值异常：存储新闻ID的状态变量被意外赋值为对象类型，而非基础类型的ID值

• 修正路由参数取值逻辑
  动态路由页面接收到的参数是对象格式，必须读取对应字段再传入请求，字段名需要和动态路由文件命名保持一致（比如路由文件为[newsId].jsx，就取params.newsId）：

  // 错误写法
  async function NewsDetailPage({ params }) {
    const res = await fetch(`https://xxxxxx/core/smart-survey/v1/news/${params}`)
  }
  
  // 正确写法
  async function NewsDetailPage({ params }) {
    const { newsId } = params
    const res = await fetch(`https://xxxxxx/core/smart-survey/v1/news/${newsId}`)
  }
  

  Pages Router场景同理，不要直接拼接router.query，要读取router.query下对应的ID字段。
• 修正列表跳转传参
  从新闻列表页跳转详情时，不要传入整条列表项对象，要传入列表项的ID属性：

  // 错误写法
  <Link href={`/news/${currentNewsItem}`}>查看详情</Link>
  
  // 正确写法
  <Link href={`/news/${currentNewsItem.id}`}>查看详情</Link>
  

• 增加前置参数校验
  在封装的请求方法或业务逻辑中增加类型判断，提前拦截非法参数，避免无效请求：

  const fetchNewsDetail = async (newsId) => {
    if (typeof newsId !== 'string' && typeof newsId !== 'number') {
      console.error('传入的新闻ID类型不合法', newsId)
      return
    }
    return fetch(`https://xxxxxx/core/smart-survey/v1/news/${newsId}`)
  }
  

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