Next.js 13.4.5 API路由无法获取groupId参数问题求助

核心问题：错误获取动态路由参数 #

在Next.js 13 App Router的API Route中，[groupId]属于动态路由参数，并非URL的查询参数（query），你当前通过parse(req.url)只能拿到user_id这类查询参数，自然获取不到groupId。

修正步骤 #

1. 修正API Route的参数获取方式 #

修改app/api/company/[groupId]/users/route.ts，通过API Route函数的第二个参数params获取动态路由参数，查询参数则用NextRequest自带的nextUrl.searchParams获取：

// app/api/company/[groupId]/users/route.ts
import { NextRequest, NextResponse } from "next/server";
import { apiClient } from "@/libs/axios";

export async function GET(
  req: NextRequest,
  { params }: { params: { groupId: string } } // 获取动态路由参数
) {
  // 获取查询参数user_id
  const userId = req.nextUrl.searchParams.get("user_id");
  // 获取动态路由参数groupId
  const groupId = params.groupId;

  // 调试用，返回参数确认
  return NextResponse.json({ groupId, userId });

  // 原业务逻辑修正后
  // const response = await apiClient.get<Graphs>(
  //   `/company/${groupId}/users`,
  //   {
  //     params: { user_id: userId },
  //   }
  // );
  // return NextResponse.json(response.data);
}

2. 优化SWR的请求逻辑（可选） #

你的SWR代码中，请求函数的参数传递有误：SWR的fetcher函数默认只接收第一个参数（请求URL），不需要额外传递userId，因为URL里已经包含了该参数。修正后的SWR代码：

import useSWR from "swr";
import { Items } from "@/generated/models";
import { apiClient } from "@/libs/axios-client";

export const useFetchItems = (groupId: string, userId: string) => {
  const url = `api/company/${groupId}/users?user_id=${userId}`;
  
  return useSWR<Items>(url, async (url) => {
    const response = await apiClient.get<Items>(url);
    return response.data;
  });
};

补充说明 #

• Next.js 13 App Router的API Route不再使用req.query获取动态路由参数，而是通过函数第二个参数params；
• 查询参数推荐用req.nextUrl.searchParams替代url.parse，这是Next.js官方推荐的方式，更贴合App Router的设计。

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