Next.js中MongoDB嵌入数组的单产品页面无法加载问题求助

1. 核对Slug匹配一致性 #

• 先确认数据库中产品的slug字段值，和页面URL里的slug完全一致（注意大小写、特殊字符、空格转义这类细节，比如burger-1和Burger-1是不同的匹配值）
• 在产品页面的数据获取函数里，打印params.slug和数据库查询到的产品slug，对比是否匹配

2. 修正嵌入数组的查询逻辑 #

因为products是Restaurant集合的嵌入数组，不能像独立集合那样直接查询。正确的查询方式是从Restaurant集合中筛选包含目标slug产品的文档，再提取对应产品：

// 示例：getStaticProps 中的查询逻辑
export async function getStaticProps({ params }) {
  // 查找包含目标slug产品的餐厅，只返回匹配的那个产品
  const restaurant = await Restaurant.findOne(
    { "products.slug": params.slug },
    { "products.$": 1 } // 投影操作，仅返回匹配的第一个产品
  );

  const product = restaurant?.products[0];
  if (!product) {
    return { notFound: true };
  }

  return {
    props: { product }
  };
}

• 额外提醒：如果多个餐厅可能存在相同slug的产品，建议修改路由为/product/[restaurantSlug]/[slug].js，查询时同时匹配餐厅slug和产品slug，避免冲突：

const restaurant = await Restaurant.findOne(
  { slug: params.restaurantSlug, "products.slug": params.slug },
  { "products.$": 1 }
);

3. 检查Next.js路由与数据生成逻辑 #

• 若使用getStaticProps，确认getStaticPaths是否正确遍历所有餐厅的products数组，生成了所有产品的静态路径，确保没有遗漏
• 若使用getServerSideProps，检查路由配置是否正确传递了slug参数，没有被其他路由规则覆盖

4. 验证数据模型与原始数据 #

• 检查Restaurant模型中products数组的字段定义，确保slug字段被正确定义为String类型，且没有被遗漏
• 直接在MongoDB客户端执行查询语句：db.restaurants.find({"products.slug": "你的目标slug"}, {"products.$": 1})，验证是否能返回对应产品，排除数据库数据本身的问题

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