Astro静态页面生成：自定义路由下匹配对应产品内容问题

问题分析 #

你当前的代码通过getStaticPaths生成了SEO友好的路由，但页面始终渲染data.products[0]的固定数据，原因是没有将路由与对应产品数据关联起来。下面提供两种可行的解决方法：

方法一：通过Props传递产品数据（推荐） #

在getStaticPaths生成路由时，直接将当前产品数据作为props传递给页面，页面接收后即可直接使用，无需额外匹配：

修改页面核心代码 #

import data from "../data/data.json";
import { processTitle } from "../utils/stringUtils.js";

export function getStaticPaths() {
  const paths = data.products.map((product) => ({
    params: {
      productPage: processTitle(product.title, product.id)
    },
    props: { product } // 将当前产品数据传入props
  }));

  return paths;
}

// 从Astro.props中获取当前产品数据
const { product } = Astro.props;

修改渲染代码 #

直接使用product对象填充组件参数：

<ProductPageDetail
  title={product.title}
  minPrice={product.minPrice}
  images={product.images}
  colors={product.colors}
  description={product.description}
  data={product.data}
  type={product.types}
/>

方法二：从路由参数中提取ID匹配产品 #

如果不想传递props，可以从生成的路由字符串中提取产品ID，再匹配对应数据（需确保processTitle生成的路由最后一段是产品ID，如my-title-1中的1）：

修改页面核心代码 #

import data from "../data/data.json";
import { processTitle } from "../utils/stringUtils.js";

export function getStaticPaths() {
  const paths = data.products.map((product) => ({
    params: {
      productPage: processTitle(product.title, product.id)
    }
  }));

  return paths;
}

const { productPage } = Astro.params;
// 从路由字符串末尾提取产品ID（假设ID用-分隔在最后）
const productId = productPage.split('-').pop();
// 匹配对应产品数据
const product = data.products.find(item => item.id === productId);

渲染代码同方法一 #

同样使用product对象填充组件参数即可。

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