Next.js中router.push报错TypeError: path.startsWith is not a function求助

云原生阿岚

2026-7-6

解决Next.js router.push跳转报错及对象参数传递问题

错误原因分析

pathname格式错误：你在router.push的pathname中直接写了/publicacion/perfilPublicacion，未用引号包裹，这会被JavaScript解析为正则表达式而非字符串，导致path.startsWith调用失败（正则表达式没有该方法）。
query参数类型错误：Next.js的router.push中query仅支持字符串/字符串数组类型，直接传递publicacion对象会导致参数无法正确解析。

修正后的代码

1. 跳转按钮组件（修正pathname和参数序列化）

<button 
  className="bg-blue-500 hover:bg-violet-500 text-white font-bold py-2 px-4 rounded mx-auto mt-auto"
  onClick={() => router.push({ 
    pathname: '/publicacion/perfilPublicacion', // 改为字符串格式
    query: { publicacion: JSON.stringify(publicacion) } // 对象序列化为字符串
  })}
>
  Me interesa
</button>

2. 目标页面（反序列化参数）

import PerfilPublicacion from "@/app/components/Publicacion/PerfilPublicacion";
import { useRouter } from "next/navigation";

export default function PerfilPublicacionPage() {
  const router = useRouter();
  const { publicacion } = router.query;
  
  // 反序列化字符串为对象，处理参数未定义的情况
  const publicacionData = publicacion ? JSON.parse(publicacion) : null;

  return <PerfilPublicacion publicacion={publicacionData} />;
}

额外注意事项

如果publicacion对象包含特殊字符，序列化后需编码避免参数解析异常：

// 跳转时
query: { publicacion: encodeURIComponent(JSON.stringify(publicacion)) }
// 接收时
const publicacionData = publicacion ? JSON.parse(decodeURIComponent(publicacion)) : null;