Next.js API通过fetch调用返回异常，请求排查原因

1. 检查API路由的参数获取与类型处理 #

你的问题核心是不同调用方式下参数解析不一致，大概率是路由中对id参数的处理存在问题：

• 在Next.js App Router的API路由中，GET请求的查询参数需要通过searchParams获取，且拿到的是字符串类型。如果直接用字符串和数字做全等比较（比如id === 1），会导致匹配失败，进入返回完整文件列表的分支。
• 示例错误代码：

  // 错误：字符串与数字全等比较不成立
  export async function GET(req) {
    const files = await fs.readdir('resources');
    const id = new URL(req.url).searchParams.get('id');
    if (id === 1) { // '1' === 1 为false
      return new Response(JSON.stringify(files[id]));
    } else if (id === 0) { // '0' == 0 隐式转换为true，所以id=0时正常
      return new Response(JSON.stringify(files[id]));
    }
    return new Response(JSON.stringify({ files }));
  }
  

• 修复方式：将id转为数字后再做判断：

  export async function GET(req) {
    const { searchParams } = new URL(req.url);
    const id = parseInt(searchParams.get('id'), 10);
    const files = await fs.readdir('resources');
    
    // 校验id有效性
    if (!isNaN(id) && id >= 0 && id < files.length) {
      return new Response(JSON.stringify(files[id]));
    }
    return new Response(JSON.stringify({ files }));
  }
  

2. 排查LoadImage组件的fetch调用逻辑 #

确认组件中的fetch请求是否用对了方式：

• 如果API路由只处理GET请求，但fetch用了POST方法传递参数，路由会拿不到id，直接返回文件列表。
• 错误示例：

  // 错误：用POST传递参数，路由无法通过searchParams获取
  const getImageName = async (id) => {
    const res = await fetch('/api/hello', {
      method: 'POST',
      body: JSON.stringify({ id })
    });
    return res.json();
  }
  

• 正确调用方式（GET传递查询参数）：

  const getImageName = async (id) => {
    const res = await fetch(`/api/hello?id=${id}`);
    return res.json();
  }
  

3. Postman调用异常的排查 #

• 清空Postman的请求缓存：点击请求右上角的「Clear Cache」按钮，避免旧响应干扰。
• 检查Postman的请求方法是否为GET，且查询参数id正确添加到URL中（不要放在Body里）。
• 对比浏览器请求和Postman请求的Headers，确保没有额外的异常Header导致路由逻辑异常。

4. 额外验证点 #

• 在路由中打印id值，确认不同调用方式下参数是否正确获取：

  console.log('Received id:', id, typeof id);
  

• 检查resources文件夹中的文件顺序是否符合预期，避免索引对应错误。

内容的提问来源于stack exchange，提问作者Marta flores calvo