Next.js App Router中useEffect无法传递serial_num到API函数

核心问题是函数参数顺序不匹配：

你定义的fetchImages函数参数顺序是(req, res, serial_num)，但调用时只传了serial_num，这个值会被赋值给第一个参数req，第三个参数serial_num自然就是undefined，导致URL拼接出错。

解决方案 #

有两种处理方式：

方式1：调整函数参数顺序（推荐，适配客户端调用场景）

修改ApiService.js里的fetchImages，把serial_num放到参数第一位：

export async function fetchImages(serial_num, req, res) {
  const url = `https://my_long_url/endpoint?serial_num=${serial_num}`;
  console.log('Making API call to:', url);
  const data = await fetchAuthenticatedData(req, res, url);
  return data;
}

方式2：调用时补全前两个参数

如果不想修改函数定义，调用时给前两个参数传undefined（适配客户端无需req/res的场景）：

const data = await fetchImages(undefined, undefined, serial_num);

额外优化提示 #

在Next.js App Router中，无需通过usePathname手动分割路径获取路由参数，页面组件可以直接通过params属性拿到[id]路由段的值：

// page.tsx的页面组件接收params参数
export default function ImagesPage({ params }) {
  const serial_num = params.id; // 直接获取路由中的[id]值

  // 后续逻辑保持不变...
}

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