类型错误：无法读取未定义的属性（读取“join”）

Question

类型错误

import { useRouter } from "next/router";

export default function PostAll() {
  const router = useRouter();
  const { all } = router.query;

  return (
    <div>
      <h1>Post: {all.join("/")}</h1>
    </div>
  );
}

wait  - compiling...
event - compiled client and server successfully in 32 ms (176 modules)
error - pages/post/[...all].js (9:21) @ PostAll
TypeError: Cannot read properties of undefined (reading 'join')
   7 |   return (
   8 |     <div>
>  9 |       <h1>Post: {all.join("/")}</h1>
     |                     ^
  10 |     </div>
  11 |   );
  12 | }

{
  "dependencies": {
    "next": "12.0.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
}

我是一个非常初学者，我通过观看在线讲座来学习。我不太明白为什么我在这段简短的代码中遇到错误。

Answer 1

router.query

默认是一个空对象

{}

，所以在

const { all } = router.query;

之后，

all

是

undefined

。而且您无法在

join

上调用

undefined

，正如错误告诉您的那样。真正的问题是 OP 导航到“localhost:3000/post/hello/world”，但仍然出现空指针异常。原因是组件使用空对象预渲染，然后使用数组再次渲染。此行为位于下面链接的文档中。 “如果页面没有数据获取要求，那么在预渲染期间，It[query] 将是一个空对象。”所以OP需要的只是一个空检查。

router

的文档位于这里

return (
  <div>
    <h1>Post: {all && all.join("/")}</h1>
  </div>
);

Answer 2

Next.js v14.2.5 中也出现此错误。我已经将其升级到最新版本（14.2.10）。一切正常。