Next.js useSearchParams构建报错：需包裹Suspense边界求助

方案1：将Reservation页面标记为客户端组件 #

如果你的项目使用App Router（Next.js 13+），useSearchParams是客户端专属钩子，必须在客户端组件中使用。在页面文件顶部添加：

'use client';

这会强制页面在客户端渲染，规避服务器端渲染时的Suspense报错。

方案2：用Suspense包裹useSearchParams的使用模块 #

若需要保留部分服务器端渲染逻辑，可将处理URL参数的代码抽离为独立客户端组件，再用Suspense包裹：

import { Suspense } from 'react';
import { useSearchParams } from 'next/navigation';

// 抽离客户端参数处理组件
function ReservationParamsHandler() {
  const searchParams = useSearchParams();
  const productId = searchParams.get('productId');
  const productName = searchParams.get('productName');
  return (
    <div>
      <p>商品ID：{productId}</p>
      <p>商品名称：{productName}</p>
    </div>
  );
}

// 主页面组件（可保留服务器端渲染能力）
export default function Reservation() {
  return (
    <div className="reservation-page">
      <h1>商品预约</h1>
      <Suspense fallback={<div>加载预约信息...</div>}>
        <ReservationParamsHandler />
      </Suspense>
    </div>
  );
}

方案3：强制页面动态渲染 #

如果页面需要动态获取URL参数且不想用Suspense，可在页面文件中添加动态渲染配置，强制页面每次请求都在服务器端动态生成：

export const dynamic = 'force-dynamic';
import { useSearchParams } from 'next/navigation';

export default function Reservation() {
  const searchParams = useSearchParams();
  const productInfo = {
    id: searchParams.get('id'),
    title: searchParams.get('title')
  };
  // 后续预约逻辑
  return <div>预约商品：{productInfo.title}</div>;
}

方案4：Pages Router兼容处理（旧版路由模式） #

如果项目使用Pages Router，直接替换为useRouter获取URL参数即可，无需useSearchParams：

import { useRouter } from 'next/router';

export default function Reservation() {
  const router = useRouter();
  const { id, title } = router.query;
  return (
    <div>
      <h1>预约{title}</h1>
      <p>商品ID：{id}</p>
    </div>
  );
}

关键注意事项 #

• 明确路由模式：App Router和Pages Router的API不兼容，避免混用。
• App Router中，useSearchParams仅能在标记了'use client'的组件中使用，或通过Suspense包裹其使用场景。
• 静态生成的页面无法直接访问URL参数，需改为动态渲染或客户端侧处理。

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