Next.js中searchParams未await报错问题求助

问题描述 #

错误提示：

路由使用了searchParams.priceTo。searchParams应先执行await操作后再使用其属性。

在Next.js中尝试获取查询参数时触发上述错误，代码示例如下：

interface SearchParams {
  place?: string;
  season?: string;
  priceFrom?: string;
  priceTo?: string;
  type?: string;
  rooms?: string;
  services?: string;
  categoryRooms?: string;
  sort?: string;
}

interface FindProps {
  searchParams: SearchParams;
}


export default async function Find({ searchParams }: FindProps) {

  const place = searchParams.place ?? '';
  const season = searchParams.season ?? '';
  const priceFrom = searchParams.priceFrom ?? '';
  const priceTo = searchParams.priceTo ?? '';
  const type = searchParams.type ?? '';
  const services = searchParams.services ?? '';
  const rooms = searchParams.rooms ?? '';
  const categoryRooms = searchParams.categoryRooms ?? ''; 
  const sort = searchParams.sort ?? '';


  return (
    <div>
    </div>
  );
}

解决方法 #

这个错误的核心是你拿到的searchParams是一个Promise对象，不是直接可用的参数集合，必须先通过await解析后才能访问属性。

方案1：修正异步参数的处理逻辑 #

如果你的searchParams确实是异步返回的，修改代码如下：

interface SearchParams {
  place?: string;
  season?: string;
  priceFrom?: string;
  priceTo?: string;
  type?: string;
  rooms?: string;
  services?: string;
  categoryRooms?: string;
  sort?: string;
}

// 修正类型定义，明确searchParams是Promise类型
interface FindProps {
  searchParams: Promise<SearchParams>;
}


export default async function Find({ searchParams }: FindProps) {
  // 先await解析Promise
  const resolvedParams = await searchParams;

  const place = resolvedParams.place ?? '';
  const season = resolvedParams.season ?? '';
  const priceFrom = resolvedParams.priceFrom ?? '';
  const priceTo = resolvedParams.priceTo ?? '';
  const type = resolvedParams.type ?? '';
  const services = resolvedParams.services ?? '';
  const rooms = resolvedParams.rooms ?? '';
  const categoryRooms = resolvedParams.categoryRooms ?? ''; 
  const sort = resolvedParams.sort ?? '';


  return (
    <div>
    </div>
  );
}

方案2：客户端组件使用useSearchParams钩子 #

如果是在客户端组件中获取查询参数，不要用props传递的方式，改用Next.js提供的useSearchParams钩子，它返回的是同步的参数对象，无需await：

'use client';
import { useSearchParams } from 'next/navigation';

export default function Find() {
  const searchParams = useSearchParams();

  const place = searchParams.get('place') ?? '';
  const season = searchParams.get('season') ?? '';
  const priceFrom = searchParams.get('priceFrom') ?? '';
  const priceTo = searchParams.get('priceTo') ?? '';
  // 其他参数同理获取

  return <div></div>;
}

注意事项 #

• 服务器组件中正常接收的searchParams是同步的URLSearchParams实例，若出现需await的情况，检查是否是自定义异步逻辑导致参数被包装成Promise。
• 类型定义必须匹配实际值，避免类型不匹配引发隐性错误。

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