Next.js 13中如何访问带连字符的查询参数？

问题核心是URL查询参数的原始键名与你代码中使用的驼峰变量名不匹配：URL里的参数是previous-page，但你试图用previousPage解构，而Next.js的searchParams会严格保留URL里的原始键名，不会自动转换为驼峰格式，所以导致取值为undefined。

你可以通过以下两种方式解决：

方法1：直接匹配原始键名（最简方案） #

修改类型定义和解构逻辑，直接对应URL里的参数名，同时可以解构时重命名为驼峰变量方便使用：

import EnergyEfficiency from "@/ui/energy-check/energy-efficiency"

const Page = ({
  params,
  searchParams,
}: {
  params: { id: string }
  searchParams: { modernization: string; 'previous-page': string } // 修正类型定义
}) => {
  const { modernization, 'previous-page': previousPage } = searchParams // 解构时重命名

  console.log(previousPage) // 现在能正确获取参数值

  return <EnergyEfficiency addressID={params.id} />
}

export default Page

方法2：批量转换为驼峰式（多参数场景适用） #

如果有多个带连字符的查询参数，可以写一个工具函数统一转换键名格式，避免重复处理：

import EnergyEfficiency from "@/ui/energy-check/energy-efficiency"

// 工具函数：将对象键名从短横线格式转为驼峰格式
const convertToCamelCase = (params: Record<string, string>) => {
  return Object.fromEntries(
    Object.entries(params).map(([key, value]) => {
      const camelKey = key.replace(/-([a-z])/g, (_, char) => char.toUpperCase())
      return [camelKey, value]
    })
  )
}

const Page = ({
  params,
  searchParams,
}: {
  params: { id: string }
  searchParams: { modernization: string; 'previous-page': string }
}) => {
  const camelCaseParams = convertToCamelCase(searchParams)
  const { modernization, previousPage } = camelCaseParams

  console.log(previousPage) // 正常获取参数值

  return <EnergyEfficiency addressID={params.id} />
}

export default Page

关键注意事项 #

• TypeScript类型定义必须与searchParams的实际键名完全一致，否则会出现类型不匹配警告
• 不要依赖框架自动转换查询参数的命名风格，严格遵循URL中的原始键名处理逻辑

内容的提问来源于stack exchange，提问作者Ala Eddine Menai