我正在尝试在我的下一个js应用程序中实现一个3级动态路由。到目前为止，我只获得了一个2级动态路由。所有的数据都来自一个无头CMS。我使用graphlQL
到目前为止，我设法获得了2个级别：博客/[类别]/[帖子]。但是我无法使此工作：博客/[类别]/[子类别]/[帖子]
这是类别的代码：

import Link from "next/link";
import { getCategories, getPosts } from "../../../utils/datocmsHelper";

export default function CategoriesPage({ category, subcategories, posts }) {
  
  return (
    <div>
      <h1>{category.categoryName}</h1>
      <h2>sub-categories inside Category:</h2>
      <ul>
        {subcategories.map((subcategory) => (
          <li key={subcategory.slug}>
            <Link href={`/blog/${category.slug}/${subcategory.slug}`}>
              {subcategory.slug}
            </Link>
          </li>
        ))}
      </ul>
      <h2>Posts:</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${category.slug}/${post.slug}`}>
              {post.slug}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  ); 
}

export async function getStaticProps(ctx) {
  const categoriesData = await getCategories();
  const postsData = await getPosts(); 

  const currentCategory = categoriesData.allCategories.find(
    (category) => category.slug === ctx.params.category
  );

  const subcategoriesInCategory = categoriesData.allCategories.filter(
    (subcategory) => subcategory.category.slug === currentCategory.slug
  );

  const postsInCategory = postsData.allPosts.filter(
    (post) => post.category.slug === currentCategory.slug
  );
  

  return {
    props: {
      category: currentCategory,
      subcategories: subcategoriesInCategory,
      posts: postsInCategory,
    },
  };
}

export async function getStaticPaths() {
  const categoriesData = await getCategories();

  return {
    paths: categoriesData.allCategories.map((category) => ({
      params: {
        category: category.slug,
        
      },
    })),
    fallback: false,
  };
}

以下是子类别的代码：

import { getPosts, getCategories } from "../../../../utils/datocmsHelper";

export default function CategoriesPage({ subcategory }) {
  return (
    <div className="flex flex-col">
      <h1>title: {subcategory.slug}</h1>
      <p>Category: {subcategory.category.slug}</p>
      <p>subcategory general content</p>
    </div>
  );
}

export async function getStaticProps(ctx) {
  const subcatogoriesData = await getCategories();

  const currentsubcategory = subcatogoriesData.allCategories.find(
    (subcategory) => subcategory.slug === ctx.params.subcategory
  );

  return {
    props: {
      subcategory: currentsubcategory,
    },
  };
}

export async function getStaticPaths() {
  const catogoriesData = await getCategories();

  return {
    paths: catogoriesData.allCategories.map((category) => 
      category.children.map((subcategory, i) => ({
        params: {
        
        subcategory: subcategory.slug,
        category: category.category.slug,
      },
    }))),
    fallback: false,
  };
}

这是给邮报的

import { getPosts } from "../../../../../utils/datocmsHelper";

export default function CategoriesPage({ post }) {
  return (
    <div className="flex flex-col">
      <h1>title: {post.title}</h1>
      <p>Category: {post.category.slug}</p>
      <p>post general content</p>
    </div>
  );
}

export async function getStaticProps(ctx) {
  const postsData = await getPosts();

  const currentPost = postsData.allPosts.find(
    (post) => post.slug === ctx.params.post
  );

  return {
    props: {
      post: currentPost,
    },
  };
}

export async function getStaticPaths() {
  const postsData = await getPosts();

  return {
    paths: postsData.allPosts.map((post) => ({
      params: {
        
        post: post.slug,
        category: post.category.slug,
      },
    })),
    fallback: false,
  };
}