任何人都可以帮助我处理这些动态内容（nextJ）

Question

我有一个包括Web内容的对象：

const postContent = {
    post1: {
        title: 'Post 1',
        content: 'Content 1'
    },
    post2: {
        title: 'Post 2',
        content: 'Content 2'
    }
}

和一个动态[post] .js：

import { postContent } from "../../lib";
import { useRouter } from "next/router";

const postWeb = () => {
    const router = useRouter();
    const { post } = router.query;
    const postGet = postContent[post]
    console.log(postGet)
    return (
        <div>
            {postGet.title}
        </div>
    );
}

export default postWeb;

我使用[post]从postcontent等postcontcontent.post1（依赖 /post /post /post /post1或 /post /post /post2）获取对象。 我使用console.log（Postget）并接收一个对象： {title：'post 1'，content：'content 1'}。但是，当我使用postget.title时，它将是未定义的并收到错误：

TypeError: Cannot read properties of undefined (reading 'title')

This error happened while generating the page. Any console logs will be displayed in the terminal window

我不知道如何解决此问题，我发现如何在NextJ中使用Dynamic Route。谁能帮助我解决这些问题，或者可以给我一些有关这些的教程？

谢谢。

Answer 1

最初渲染中的问题

TypeError: Cannot read properties of undefined (reading 'title')

，您正在访问最初不存在的对象的属性。

解决方案

考虑添加默认值或短路

  return (
        <div>
            {postGet && postGet.title}
        </div>
    );