Question

这是我的页面树

├── _app.tsx
├── _document.tsx
├── index.tsx
└── [type]
    └── [slug].tsx

这是[slug]页面的getStaticPaths：

export const getStaticPaths: GetStaticPaths = async () => {
  const posts = getAllPosts(["slug"]);

  return {
    paths: posts.map((posts) => {
      return {
        params: {
          type: posts.mainTag,
          slug: posts.slug,
        },
      };
    }),
    fallback: false,
  };
};

例如，页面看起来像这样 http://localhost:3000/programming/some-slug

当我去某个职位时，出现此错误：

/ [type] / [slug]的getStaticPaths中未提供必需的参数（类型）作为字符串

我只是不知道如何为路由器提供type参数。

Answer 1

上面的示例代码似乎正确，因此我将尝试两件事：

1）调用await时没有看到getAllPosts(["slug"])前缀-这意味着您在返回数据之前就已经返回。

除非经过设计，否则请更改为：

const posts = await getAllPosts(["slug"]);

2）可能存在数据问题，并且您缺少预期的属性。我建议您通过替换一个简单的数组来检查getStaticPaths：

const Test = (props) => {
    return (
       <>
           {props.slug}
       </>
    );
};

export async function getStaticProps({params}) {
    return {
        props: params
    }
}

export async function getStaticPaths() {
    const posts = [
        {
            mainTag: 'programming',
            slug: 'hello-world'
        },
        {
            mainTag: 'programming',
            slug: 'nextjs-101'
        },
    ];

    return {
        paths: posts.map((posts) => {
            return {
                params: {
                    type: posts.mainTag,
                    slug: posts.slug,
                },
            };
        }),
        fallback: false,
    };
}

export default Test;

如何在getStaticPaths中使用多个嵌套动态路由？

1 个答案: