React中带分类url_slug的分页getStaticPaths配置问题解决

核心问题 #

报错根源是getStaticPaths未生成包含url_slug参数的完整路径，Next.js静态生成时找不到对应预渲染页面，因此抛出参数缺失错误。同时当前getStaticProps未根据url_slug过滤分类内容，即使路径修复，也会显示全部博客而非目标分类内容。

修改代码 #

1. 修复getStaticPaths，生成所有分类+分页的组合路径

先获取所有有效的url_slug，再为每个slug生成分页路径：

export async function getStaticPaths() {
  // 获取所有博客分类的url_slug
  const blogTaggings = await Collection('blog_taggings');
  const allSlugs = blogTaggings.getItems().map(tagging => tagging.url_slug);
  
  // 去重避免重复路径
  const uniqueSlugs = [...new Set(allSlugs)];

  // 为每个slug生成对应分页路径
  const paths = [];
  for (const slug of uniqueSlugs) {
    // 过滤出当前分类下的博客（根据实际数据关联字段调整过滤条件）
    const taggedBlogs = await Collection('blogs').filterBy('tag_slug', slug);
    // 生成分页参数
    const pagePaths = taggedBlogs.getPages(2).map(pageInfo => ({
      params: {
        url_slug: slug,
        page: pageInfo.params.page // 适配getPages返回的页码格式
      }
    }));
    paths.push(...pagePaths);
  }

  return {
    paths: paths,
    fallback: false // 若需动态生成未预渲染的路径，可改为'blocking'或true
  };
}

2. 修改getStaticProps，根据url_slug过滤分类内容

确保返回当前分类下的博客及分页数据：

export async function getStaticProps({ params }) {
  // 根据url_slug过滤对应分类的博客（调整过滤字段为实际关联字段）
  const taggedBlogs = await Collection('blogs').filterBy('tag_slug', params.url_slug);

  const blog_taggings = await Collection('blog_taggings');
  const all_blog_taggings = blog_taggings.orderBy('publish_date').getItems();

  // 基于分类博客生成分页数据
  const all_paginations = taggedBlogs.getPages(2);
  const all_currentPage = taggedBlogs.getPageItems(params.page, 2);

  return { 
    props: { 
      all_blog_taggings, 
      all_paginations, 
      all_currentPage, 
      global: global.toJson(),
      currentSlug: params.url_slug
    } 
  };
}

关键说明 #

• 过滤条件适配：代码中filterBy('tag_slug', slug)需根据你的数据结构调整，比如博客与分类的关联字段是tag_url或其他，要对应替换。
• 分页格式适配：确保getPages返回的页码格式符合Next.js参数要求，需为字符串类型。
• 去重处理：对url_slug去重可减少重复路径，提升静态生成效率。

内容的提问来源于stack exchange，提问作者Teik Cheah