错误：在 /posts/[slug] 的 getStaticPaths 中未以字符串形式提供必需的参数 (slug)

Question

我的项目中有以下 [slug].js 文件：

import Head from "next/head";
import PostContent from "../../components/posts/post-detail/post-content";
import { getPostByName, getAllPosts } from "../../helpers/api-util";

function PostDetailPage(props) {
  const post = props.selectedPost;
  console.log(post);
  if (!post) {
    return (
      <div className="">
        <p>Loading...</p>
      </div>
    );
  }
  return <PostContent post={post.slug} />;
}


export async function getStaticProps(context) {
  const blogSlug = context.params.slug;
  const post = await getPostByName(blogSlug);
  return {
    props: {
      selectedPost: post,
    }, // will be passed to the page component as props
  };
}

export async function getStaticPaths() {
  const posts = await getAllPosts();
  const paths = posts.map(post => ({ params: { blogSlug: post.slug } }));

  return {
    paths: paths,
    fallback: "blocking",
  };
}

export default PostDetailPage;

这是我的文件结构：

我从 firebase 获取数据，数据结构如下：

这个想法是，当我在“所有帖子”页面上单击我的帖子时，我会进入包含我所有帖子信息的 PostContent 组件。

当我尝试单击特定帖子时，我收到主题中提到的错误。

Slug不是一个字符串，所以我不完全确定为什么我会得到这个。

谢谢

Answer 1

文件名动态密钥与代码中期望的内容不匹配。

您返回blogSlug密钥getStaticPaths：

const paths = posts.map(post => ({ params: { blogSlug: post.slug } }));

但您的文件已命名，[slug].js并且您期望slug此处有一个密钥getStaticProps：

const blogSlug = context.params.slug;

它应该是一致的，在这种情况下它应该在任何地方都被命名slug。