Next.js 15生产构建报错：useSearchParams()需包裹在Suspense边界中（已尝试Suspense仍无效）

我明白你遇到的问题了——明明已经在组件里加了Suspense，但生产构建还是报useSearchParams()需要包裹在Suspense边界里的错误，这确实挺让人困惑的。

问题根源 #

你现在是把<Suspense>放在了SearchResults组件的内部，但Next.js在处理客户端组件中useSearchParams这类会触发CSR Bailout的API时，要求Suspense必须放在组件的上层（父组件/页面入口）。因为当你的组件开始渲染时，顶层的useSearchParams()已经先执行了，内部的Suspense根本来不及捕获这个异步加载状态，自然无法生效。

具体解决方案 #

你需要把Suspense从组件内部移到页面的入口文件（也就是app/find/searchResults/page.jsx）中，用它来包裹你的SearchResults组件，而不是在组件自己内部嵌套。

步骤1：修改page.jsx

把原来直接导出SearchResults的代码，改成用Suspense包裹的结构：

// app/find/searchResults/page.jsx
import { Suspense } from 'react';
import SearchResults from './SearchResults'; // 注意你的组件文件名是否匹配

// 这个page文件可以保持为服务器组件，不需要加"use client"
export default function SearchResultsPage() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <SearchResults />
    </Suspense>
  );
}

步骤2：移除组件内部的Suspense

打开你的SearchResults组件，删掉最外层的<Suspense>标签，保留里面的内容即可：

// 你的SearchResults组件修改后
"use client";

import React, { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
// ... 其他导入保持不变

const SearchResults = () => {
  const searchParams = useSearchParams();
  const searchTerm = searchParams.get("query")?.trim() || ""; // 这里建议加个可选链，避免query为null时报错
  // ... 其余逻辑保持不变

  // 返回部分去掉外层的Suspense
  return (
    <div className="min-h-screen bg-gray-50 px-4 py-6">
      {/* 原来的内容全部保留 */}
    </div>
  );
};

export default SearchResults;

额外提示 #

• 注意在获取searchTerm时，建议加上可选链searchParams.get("query")?.trim()，避免当URL中没有query参数时，get()返回null导致调用trim()报错。
• Next.js 15中，客户端组件使用useSearchParams、usePathname这类依赖客户端路由状态的API时，预渲染阶段无法获取到这些值，会触发CSR Bailout，此时必须由上层的Suspense来处理加载状态，否则生产构建就会抛出你遇到的错误。

备注：内容来源于stack exchange，提问作者Yash Kumar