部署在Vercel的Next.js路由处理器Search Params为undefined问题

1. API路由获取查询参数的方式存在兼容性问题 #

在Vercel部署环境中，直接通过new URL(request.url)解析查询参数可能因为内部请求URL的格式差异，导致解析异常。推荐使用Next.js App Router官方提供的解构searchParams参数的方式，这种方式在本地和生产部署环境中都更可靠：

修改/api/nfl/gameData/route.ts中的GET函数：

import { NextResponse } from "next/server"

export async function GET(
  request: Request,
  { searchParams }: { searchParams: { gameId?: string } }
) {
  const gameId = searchParams.gameId;

  console.log(`Game ID in api route: ${gameId}`);
  if (!gameId) {
    return NextResponse.json({ error: "gameId is required" }, { status: 400 });
  }

  const gameDataResponse = await fetch(
    `https://site.api.espn.com/apis/site/v2/sports/football/nfl/summary?event=${gameId}`
  );
  
  if (!gameDataResponse.ok) {
    throw new Error("Failed to fetch game data");
  }
  
  const gameData = await gameDataResponse.json();

  // other api calls and formatting before returning

  return NextResponse.json({ gameData }); // 修复语法错误：补全闭合大括号
}

2. 客户端调用API时的URL拼接存在风险 #

客户端代码中使用http://${BASE_URL}拼接请求URL，如果BASE_URL在Vercel部署环境中配置错误（比如未设置为生产环境的HTTPS域名，或仍使用localhost），会导致请求发送到错误地址，API路由自然无法获取到参数。

推荐改用相对路径调用API，彻底避免依赖BASE_URL的配置：

"use client"

const fetcher = (url: string) => fetch(url).then((res) => res.json());

export default function TeamPage({ params }: { params: { gameId: string } }) {
  console.log(params.gameId);
  const { data, isLoading } = useSwr(
    `/api/nfl/gameData?gameId=${params.gameId}`, // 改用相对路径
    fetcher
  );
}

3. 修复API路由返回语句的语法错误 #

原代码中return NextResponse.json({"gameData": gameData);缺少一个闭合的大括号，虽然本地可能侥幸运行，但Vercel的严格编译环境可能导致请求失败，这也可能间接引发参数解析的异常表现。

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