Next.js 上下文中的 getStaticProps 参数等于 '[object Object]' / getStaticProps 被多次调用

Question

我试图理解为什么 getStaticProps 被多次调用。

相关文件在我的 pages/posts 文件夹中称为 [postId].js； 下面的代码：

const MyPost({post}) => {
// Main component in here
}

export default MyPost

export async function getStaticProps(context) {
    const { params } = context;
    console.log('params', params)
    // Call API with params.postId and get postContent
    return {
        props: {
            post: postContent,
        },
        revalidate: 10, // In seconds
    }
}

export async function getStaticPaths() {
    const res = await axios.get(API_URL + '/get-post-ids')
    // Get the paths we want to pre-render based on posts
    const paths = res.data.post_ids.map((id) => ({
        params: { postId: id },
    }))
    return { paths, fallback: 'blocking' }
}

这记录

params { postId: 'post-1' }
params { postId: '[object Object]' }

为什么 getStaticProps 被调用两次？ 为什么第二个渲染中的路径参数是[object Object] ？ 我能做些什么来防止这种情况发生？

我正在尝试使用路径参数调用 API，我可以在后端看到两个请求，第一个请求没有问题，但第二个请求导致错误。

多谢！

编辑：

在 getStaticPaths 中注销路径我得到

 paths [ { params: { postId: 'post-1' } }, { params: { postId: 'post-2' } } ]

所以不确定[object Object]来自哪里......

Answer 1

getStaticProps function 被调用两次，因为getStaticPaths返回一个fallback: 'blocking'选项，这意味着当访问一个没有预渲染的新页面时， Next.js 将回退到服务器端渲染，在这种情况下它意味着将再次调用getStaticProps以呈现新页面。

关于 postId 是[object Object] ，作为postId参数传递的 object 很可能不是字符串，而是 object。您可能在getStaticPaths返回的paths数组中传递了 object。 确保传入paths数组的 object 的postId属性是字符串，或者将其转换为字符串再传递给getStaticPaths 。