Next.js 13.4服务端用searchParams报错：Cannot read properties of undefined (reading 'size')

开发添加购物车功能时，点击按钮触发请求后，服务端获取size和style查询参数时报错：Cannot read properties of undefined (reading 'size')，问题出在后端代码。

前端代码 #

const addToCartHandler = async () => {
  const style = Number(searchParams.get("style"));
  const size = searchParams.get("size");
  console.log("iam from front", style, Number(size));
  await axios
    .get(`/api/product/${product._id}?style=${style}&size=${size}`)
    .then((res) => console.log("data------>", res.data));       
};

原后端代码（报错版本） #

import { NextResponse } from "next/server";
import connect from "../../../../utils/db";
export const GET = async (
  req: Request,
  { params, searchParams }: { params: any; searchParams: any }
) => {
  try {
    await connect();
    const { id } = params;
    const size = searchParams.size;
    const style = searchParams.style;
    console.log(id, size, style);
    return new NextResponse(id, { status: 200 });
  } catch (error: any) {
    return new NextResponse(`${error}`, {
      status: 500,
      statusText: error.message,
    });
  }
};

解决方案 #

在Next.js 13.4的App Router API路由中，GET函数的第二个参数仅包含params，没有直接提供searchParams。需要从传入的Request对象手动解析查询参数：

1. 通过new URL(req.url)创建URL实例
2. 调用url.searchParams.get()方法获取具体参数值

修改后的后端代码：

import { NextResponse } from "next/server";
import connect from "../../../../utils/db";
export const GET = async (
  req: Request,
  { params }: { params: { id: string } }
) => {
  try {
    await connect();
    const { id } = params;
    // 从Request对象解析查询参数
    const url = new URL(req.url);
    const size = url.searchParams.get("size");
    const style = url.searchParams.get("style");
    
    console.log(id, size, style);
    return new NextResponse(id, { status: 200 });
  } catch (error: any) {
    return new NextResponse(`${error}`, {
      status: 500,
      statusText: error.message,
    });
  }
};

说明 #

原代码错误地在第二个参数中解构searchParams，但App Router的API路由并不支持这种写法。必须通过Request对象的URL来提取查询参数，这是Next.js App Router与Pages Router的差异点之一。

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