Next.js 13页面路由中Server Component无法获取查询参数

架构老林

2026-7-9

Next.js 13页面路由Server Component获取查询参数的正确方法

你的代码结构本身没问题，但searchParams无法获取值可能由以下几个原因导致，对应解决方法如下：

1. 确认组件是纯Server Component

确保你的组件没有添加'use client'指令——Client Component无法直接接收params和searchParams参数，必须通过父级Server Component以props形式传递。

2. 升级Next.js到稳定版本

Next.js 13早期的App Router版本存在searchParams的bug，建议升级到13.4及以上版本（App Router从13.4开始进入稳定阶段），避免参数传递异常。

3. 正确使用查询参数的获取方式

searchParams是一个URLSearchParams实例（而非普通对象），你可以通过它的内置方法获取参数：

获取单个参数值：searchParams.get('limit')
获取多个同名参数（如?tag=react&tag=next）：searchParams.getAll('tag')
转换为普通对象查看：Object.fromEntries(searchParams)

修正后的代码示例：

import { notFound } from 'next/navigation';
import type { SearchParams } from 'next/navigation';

type Params = {
  domain: string;
};

export default async function Home({
  params,
  searchParams,
}: {
  params: Params;
  searchParams: SearchParams;
}) {
  const data = await getSiteData(params.domain);

  if (!data) {
    notFound();
  }

  // 获取limit参数
  const limit = searchParams.get('limit');
  console.log('limit参数值:', limit);
  console.log('所有查询参数:', Object.fromEntries(searchParams));

  return (
    <div>
      <p>当前域名: {params.domain}</p>
      {limit && <p>分页限制: {limit}</p>}
    </div>
  );
}