next/navigation中useSearchParams的get()方法无法正确读取+等特殊字符

问题原因 #

URL查询参数的标准规范里，+默认会被解析成空格，Next.js 的 useSearchParams 严格遵循这个规则，所以未编码的+会被自动替换成空格。

可行解决方案 #

1. 生成URL时编码特殊字符 #

如果是你这边生成的URL，把参数里的+用encodeURIComponent转成%2B，这样前端用useSearchParams就能拿到原始的+：

const user = "abc+desc@gmail.com";
const encodedUser = encodeURIComponent(user);
const url = `http://localhost:3000/cards?user=${encodedUser}`;
// 生成的URL：http://localhost:3000/cards?user=abc%2Bdesc%40gmail.com

这时候调用searchParams.get("user")，得到的就是abc+desc@gmail.com。

2. 手动替换空格为+ #

如果没法控制URL的生成，拿到参数后把空格替换回+就行：

const searchParams = useSearchParams();
const singleParam = searchParams.get("user")?.replace(/ /g, "+");
// 结果就是 abc+desc@gmail.com

3. 读取原始查询字符串解析 #

要更精准控制的话，直接从请求头里拿原始查询字符串手动解析：

import { headers } from "next/headers";

export default function Page() {
  const headerList = headers();
  const fullUrl = headerList.get("next-url");
  if (!fullUrl) return null;

  const rawQuery = fullUrl.split("?")[1];
  if (!rawQuery) return null;

  // 提取user参数的原始值，再解码
  const userRaw = rawQuery.match(/user=([^&]+)/)?.[1];
  if (!userRaw) return null;

  // 把原始的+转成%2B再解码，避免被当成空格
  const decodedUser = decodeURIComponent(userRaw.replace(/\+/g, "%2B"));
  // decodedUser 就是 abc+desc@gmail.com

  return <div>{decodedUser}</div>;
}

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