Next.js生产环境useSearchParams需包裹Suspense问题求助

错误原因 #

你的页面组件在顶级作用域直接调用了useSearchParams()，本地开发环境对Suspense的检查相对宽松未触发报错，但Netlify生产环境下，Next.js的生产优化会严格执行React Suspense机制要求：使用useSearchParams这类依赖客户端路由状态的钩子时，必须将其所在的组件逻辑包裹在Suspense边界内。你当前的Suspense仅包裹了渲染结果，未覆盖钩子调用的核心逻辑，因此触发报错。

修复方案 #

将依赖useSearchParams的过滤与渲染逻辑抽离为独立的客户端子组件，在父页面中用Suspense包裹该子组件，确保钩子调用处于Suspense边界内。

步骤1：创建子组件ImoveisList.js #

"use client";

import { useSearchParams } from "next/navigation";
import { imoveis } from "../data/imoveis";
import Link from "next/link";

export default function ImoveisList() {
  const searchParams = useSearchParams();
  const tipo = searchParams.get("tipo");

  const filteredImoveis = tipo
    ? imoveis.filter((imovel) => imovel.tipo === tipo)
    : [];

  return (
    <>
      {filteredImoveis.length > 0 ? (
        <ul>
          {filteredImoveis.map((imovel, index) => (
            <li
              key={index}
              className="bg-neutral-200 m-2 text-black p-2 w-96"
            >
              <div>
                <Link href={imovel.path}>
                  <p>{imovel.title}</p>
                  <p>{imovel.price}</p>
                </Link>
              </div>
            </li>
          ))}
        </ul>
      ) : (
        <p>Nenhum resultado encontrado.</p>
      )}
    </>
  );
}

步骤2：修改父页面ImoveisPage.js #

import React, { Suspense } from "react";
import ImoveisList from "./ImoveisList";

const ImoveisPage = () => {
  return (
    <div className="bg-gray-400 text-black min-h-screen p-8">
      <h1 className="text-2xl">Resultados da Pesquisa</h1>
      <Suspense fallback={<div>Carregando...</div>}>
        <ImoveisList />
      </Suspense>
    </div>
  );
};

export default ImoveisPage;

补充方案 #

若不想抽离子组件，也可通过动态导入实现（本质仍是将钩子逻辑包裹在Suspense内）：

// ImoveisPage.js中替换导入语句
import dynamic from "next/dynamic";

const ImoveisList = dynamic(() => import("./ImoveisList"), {
  ssr: false,
  loading: () => <div>Carregando...</div>,
});

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