NextJS 13页面刷新时router.query解析JSON出现Unexpected token u错误求助

你的问题核心是刷新页面时router.query初始值未就绪，导致pick为undefined，decodeURIComponent(undefined)会返回字符串"undefined"，而JSON.parse("undefined")不属于合法JSON（JSON规范中没有单独的undefined类型），因此抛出SyntaxError。

下面是兼顾路由异步特性与异常处理的推荐方案：

修改后的代码 #

import React from 'react'
import { useRouter } from 'next/router'
import Header from '@/components/Header'

function Quotes() {
  const router = useRouter()
  const { pick, drop } = router.query

  let parsedPick = null

  // 仅当pick存在时执行解码和解析
  if (pick) {
    try {
      const uriComponent = decodeURIComponent(pick)
      parsedPick = JSON.parse(uriComponent)
      console.log(typeof uriComponent, typeof parsedPick)
    } catch (err) {
      console.error('参数解析失败:', err)
      // 可在此添加错误提示或默认值兜底逻辑
    }
  }

  // 路由参数未加载完成时显示加载状态
  if (!router.isReady) {
    return <div>加载中...</div>
  }

  return (
    <>
      <Header />
      <main>
        <div>{pick}</div>
        <div>{drop}</div>
        {parsedPick && <div>解析后的数据: {JSON.stringify(parsedPick)}</div>}
      </main>
    </>
  )
}

export default Quotes

关键优化点 #

• 等待路由就绪：通过router.isReady判断路由参数是否完全加载，避免在初始渲染时处理未就绪的query
• 存在性前置检查：处理pick前先判断其是否存在，防止undefined传入解码方法
• 异常捕获机制：用try/catch包裹解码和解析操作，避免非法参数导致页面崩溃
• 安全渲染逻辑：仅当解析后的数据存在时才渲染对应内容，避免空值渲染问题

额外适配说明 #

如果你的项目使用NextJS 13的App Router（而非Pages Router），需替换useRouter为useSearchParams，示例如下：

import { useSearchParams } from 'next/navigation'

function Quotes() {
  const searchParams = useSearchParams()
  const pick = searchParams.get('pick')
  const drop = searchParams.get('drop')
  
  // 后续解析逻辑同上（添加存在性检查和try/catch）
}

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