如何用NextJS+MongoDB与getStaticProps/Paths实现嵌套动态路径

1. 动态Link组件配置修正 #

硬编码路径无法适配动态数据，你可以直接基于MongoDB返回的动态数据拼接路径，或者使用NextJS Link支持的对象式路径配置，两种方式都能避免硬编码：

字符串拼接示例 #

import Link from 'next/link';

// 假设从MongoDB获取的店铺、分类、商品数据
const shop = { _id: 'shop_123' };
const category = { name: 'Electronics' };
const product = { name: 'Wireless Headphones' };

<Link href={`/${shop._id}/Categories/${category.name}/${product.name}`}>
  <a>查看商品</a>
</Link>

对象式配置示例（更推荐，避免编码问题） #

<Link 
  href={{
    pathname: '/[ShopID]/Categories/[CategoryName]/[ProductName]',
    query: {
      ShopID: shop._id,
      CategoryName: category.name,
      ProductName: product.name
    }
  }}
>
  <a>查看商品</a>
</Link>

2. getStaticProps & getStaticPaths 配置逻辑 #

每个动态层级页面都需要配置对应的SSG方法，具体规则如下：

各页面配置说明 #

• [ShopID]页面：

  • 需要getStaticPaths：预生成所有店铺的路径（从MongoDB查询所有店铺ID）。
  • 需要getStaticProps：根据当前ShopID查询该店铺的基础信息及所有分类数据，供页面渲染使用。

• Categories/[CategoryName]页面：

  • 需要getStaticPaths：基于所有店铺ID，查询每个店铺下的所有分类，生成/[ShopID]/Categories/[CategoryName]的所有组合路径。
  • 需要getStaticProps：根据ShopID和CategoryName查询该分类下的所有商品数据。

• [ProductName]页面：

  • 需要getStaticPaths：基于所有店铺、分类的组合，查询每个分类下的所有商品，生成完整的商品路径。
  • 需要getStaticProps：根据ShopID、CategoryName、ProductName三个参数，从MongoDB查询对应商品的详情数据。

数据传递注意点 #

不需要通过组件链传递MongoDB数据，每个页面直接通过getStaticProps从服务端获取对应层级的数据即可——SSG预渲染时会自动把数据注入页面，客户端渲染时也会通过NextJS的缓存机制获取，避免冗余传递。

3. 替代useRouter传递数据的方案 #

用useRouter传递商品数据本身就不合理：URL参数长度有限，且刷新页面后路由携带的自定义数据会丢失。正确做法是：

在[ProductName].js页面的getStaticProps中，通过路径参数直接查询MongoDB：

export async function getStaticProps(context) {
  const { ShopID, CategoryName, ProductName } = context.params;
  
  // 从MongoDB查询对应商品详情
  const product = await db.collection('products').findOne({
    shopId: ShopID,
    categoryName: CategoryName,
    name: ProductName
  });

  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product },
    revalidate: 60 // 增量静态生成，60秒更新一次
  };
}

页面直接使用props.product渲染即可，无需依赖路由传参。

4. getStaticProps获取店铺数据的检查清单 #

你可以对照以下几点排查是否有遗漏：

• 是否正确从context.params中获取ShopID参数？
• 是否添加了数据不存在的处理逻辑（比如返回{ notFound: true }）？
• 是否配置了revalidate参数？商家数据可能会更新，增量静态生成能保证页面数据及时同步。
• 是否有错误捕获机制？比如用try-catch包裹MongoDB查询，避免数据库连接失败导致页面崩溃。
• 是否查询了页面所需的完整数据？比如除了店铺基础信息，是否同时查询了该店铺的分类列表，供下一级路径使用？

5. Cookie/本地存储替代MongoDB的可行性分析 #

不推荐用Cookie或本地存储存储店铺、分类、商品等业务数据，原因如下：

• Cookie有大小限制（约4KB），无法存储大量业务数据；且每次HTTP请求都会携带Cookie，增加带宽消耗。
• 本地存储（localStorage/sessionStorage）数据存在客户端，容易被篡改，安全性差；且无法支持服务端渲染（SSR/SSG），会导致页面首屏无数据、SEO失效。
• 业务数据需要统一管理和更新，服务端数据库（如MongoDB）才是可靠的存储方案。如果担心MongoDB的问题，可以考虑切换到其他关系型数据库（如PostgreSQL），或通过NextJS API路由封装数据查询逻辑，避免直接在页面中操作数据库。

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