Next.js useSearchParams更新异常：自定义Hook参数滞后问题求助

问题场景 #

我创建了一个用于更新URL搜索参数的React自定义Hook：

import { useSearchParams, usePathname, useRouter } from "next/navigation";

export const useParams = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  const setParams = (key: string, value: string) => {
    const params = new URLSearchParams(searchParams);
    params.set(key, value);
    router.replace(`${pathname}?${params}`);
  };

  return { setParams };
};

在客户端组件中使用该Hook处理分页逻辑：

export const Pagination = () => {
  const { setParams } = useParams();

  const handleChangePageSize = (size: number) => {    
    setParams("pageSize", size.toString());
  };

  const handleSetPage = (pageNumber: number) => {
    setParams("pageNumber", pageNumber.toString());
  };
// ... 更多代码

遇到的问题：调用handleChangePageSize设置pageSize后，立即调用handleSetPage时，pageSize参数不会更新为最新值，而是保留上一次的旧值。例如连续将pageSize设为3、6后调用handleSetPage，最终URL参数里的pageSize仍为3，存在一次更新滞后。

问题原因 #

核心问题是闭包捕获的旧值导致参数更新基于快照而非最新状态：

• useSearchParams返回的是当前组件渲染周期的URL参数快照，这个值会被setParams函数的闭包捕获。
• 当连续调用setParams时，组件还没来得及重新渲染，searchParams仍然是初始的旧快照值，每次更新都是基于这个旧值修改，而非最新的URL参数。
• 只有当组件重新渲染后，useSearchParams才会返回新的参数快照，但连续调用发生在同一渲染周期内，无法获取到最新值。

修正方案 #

有两种可靠的修正方式，任选其一即可：

方案1：基于当前URL实时获取最新参数 #

直接从浏览器的window.location中读取最新的搜索参数，避免依赖闭包中的旧快照：

import { usePathname, useRouter } from "next/navigation";

export const useParams = () => {
  const router = useRouter();
  const pathname = usePathname();

  const setParams = (key: string, value: string) => {
    // 从当前URL获取最新的搜索参数
    const currentParams = new URLSearchParams(window.location.search);
    currentParams.set(key, value);
    router.replace(`${pathname}?${currentParams}`);
  };

  return { setParams };
};

方案2：支持函数式更新 #

修改setParams，允许传入一个更新函数，在需要连续更新多个参数时，可以基于同一批参数进行修改，同时也能兼容单次更新：

import { useSearchParams, usePathname, useRouter } from "next/navigation";

export const useParams = () => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();

  // 支持传入key-value或更新函数两种形式
  const setParams = (keyOrUpdater: string | ((params: URLSearchParams) => void), value?: string) => {
    const params = new URLSearchParams(searchParams);
    if (typeof keyOrUpdater === 'function') {
      keyOrUpdater(params);
    } else {
      params.set(keyOrUpdater, value!);
    }
    router.replace(`${pathname}?${params}`);
  };

  return { setParams };
};

使用方式示例（连续更新时）：

// 一次性更新多个参数，避免滞后
const handleBatchUpdate = (size: number, page: number) => {
  setParams((params) => {
    params.set("pageSize", size.toString());
    params.set("pageNumber", page.toString());
  });
};

如果需要连续调用单个参数更新，方案1更适合，因为它始终基于最新的URL状态；方案2更适合批量更新场景。

内容的提问来源于stack exchange，提问作者sir-haver