错误:在/post/[Slug]的getStaticPaths中没有以字符串形式提供所需的参数(段塞)

Question

嘿，我开始了一个关于Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS的教程，它向我展示了这个错误，我不知道如何修复它，它只向我展示了当我试图输入post时，这是一个错误：

错误:在getStaticPaths中没有为/post/Slug提供所需的参数(段塞)

这是代码：

​

import React from 'react';
import { useRouter } from 'next/router';

import { PostDetail, Categories, PostWidget, Author, Comments, CommentsForm, Loader } from '../../components';
import { getPosts, getPostDetails } from '../../services';


const PostDetails = ({post}) => {
  
  console.log({post});

  if (router.isFallback) {
    return <Loader />;
  }

  return (
    <>
      <div className="container mx-auto px-10 mb-8">
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12">
          <div className="col-span-1 lg:col-span-8">
            <PostDetail post={post} />
            <Author author={post.author} />
            
            <CommentsForm slug={post.slug} />
            <Comments slug={post.slug} />
          </div>
          <div className="col-span-1 lg:col-span-4">
            <div className="relative lg:sticky top-8">
              <PostWidget slug={String(post.slug)} categories={post.categories.map((category) => String(category.slug))} />
              <Categories />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};
export default PostDetails;


export async function getStaticProps({ params }) {
  const data = await getPostDetails(String(params.slug));
  return {
    props: {
      post: data,
    },
  };
}


export async function getStaticPaths() {
  const posts = await getPosts();
  return {
    paths: posts.map(({ node: { slug } }) => ({ params: {slug}})),
    fallback: true,
  };
}

​

Answer 1

错误在这里

  paths: posts.map(({ node: { slug } }) => ({ params: {slug}})),

如果您这样使用，您的动态页面名应该是我[slug]。例如，如果您的动态页面是[id].js，那么您应该拥有

   paths: posts.map(({ node: { slug } }) => ({ params: {id}})),