在NextJS中通过路径参数判断query值是否为空的实现方法

问题原因 #

你遇到的现象是两个层面的问题共同导致的：

1. Next.js 中 useRouter 返回的路由对象在页面完成 hydration、路由参数完全解析前，isReady 属性为 false，此时 router.query 是空对象，直接读取参数拿到的是 undefined，且路由就绪后会触发组件重渲染，没有加就绪判断的逻辑不会执行预期的空值分支。
2. 你当前用的 [variable1].js 是必选动态路由，只有带参数的路径如 /search/abc 能匹配到该页面，无参数的 /search/ 默认不会命中这个路由，会直接走404逻辑，自然不会执行页面内的代码，也就不会打印 empty。

解决方法 #

第一步：修改路由文件适配无参数场景 #

如果需要让 /search/ 也能匹配到当前页面，把页面文件名从 [variable1].js 改成 [[...variable1]].js，这是 Next.js 可选捕获所有路由的语法，可同时匹配带/不带参数的 /search/ 路径。

第二步：加路由就绪判断再取值 #

修改代码如下即可正确判断：

import { useRouter } from "next/router"

const Variable = () => {
  const router = useRouter()
  // 路由未就绪时先返回加载状态/空，不执行业务逻辑
  if (!router.isReady) return null

  const { variable1 } = router.query
  // 此处可正常判断空值
  variable1 ? console.log("not empty") : console.log("empty")

  return <div>搜索页</div>
}

export default Variable

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