Next.js中出现path.startsWith is not a function错误求助

问题原因 #

你使用的是Next.js App Router的useRouter（导入自next/navigation），该版本的router.push仅支持传入字符串类型的路径，不接受对象格式参数。代码中传入的对象被当作路径处理，导致调用path.startsWith时触发类型错误。

修复方案 #

直接将金额参数拼接成字符串路径传入router.push即可：

import { useRouter } from 'next/navigation'

const checkoutHandler = ()=>{
  router.push(`/checkout/${customAmount}`)
}

<div className="continue-btn" onClick={checkoutHandler}>
   Continue
</div>

补充说明 #

如果是Next.js Pages Router的useRouter（导入自next/router），才支持传入包含pathname和query的对象参数，但App Router的导航API已调整为仅支持字符串路径或标准URL对象。

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