Next.js使用getStaticPaths和getStaticProps时datas.id无返回问题求助

Array.prototype.filter() 方法返回的是符合筛选条件的元素组成的数组，而非单个对象。你在getStaticProps中使用filter筛选匹配id的条目后，传递给页面组件的datas为数组格式，直接调用datas.id无法读取到属性值，因此页面无内容渲染。

方案1：替换筛选方法（推荐） #

将getStaticProps中的filter方法替换为find，find会返回第一个符合条件的单个对象，匹配单条数据查询的需求，修改后代码如下：

export const getStaticProps = async (context) => {
    const id = context.params.id;
    // 替换filter为find
    const data = datas.find((mod) => mod.id.toString() === id)
    return {
        props: {
            datas: data
        }
    }
}

方案2：调整数组取值逻辑 #

如果保留filter方法，需要在组件中读取数组第一项的属性，修改组件代码如下：

export default function Projects({ datas }) {
    return (
        <>
            <h1>
                {datas[0]?.id}
            </h1>
        </>
    )
}

建议在组件中增加兜底校验逻辑，避免数据不存在时页面报错崩溃：

export default function Projects({ datas }) {
    if(!datas) return <div>暂无对应数据</div>
    return (
        <>
            <h1>{datas.id}</h1>
            <p>{datas.name}</p>
            <img src={datas.image} alt={datas.name} />
        </>
    )
}

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