Astro 组件报错排查：HorizontalCard 的空值解构引发渲染崩溃

表现

在个人博客系统中，访问 /projects 列表页时页面渲染正常，但点击具体的 Project 卡片跳转至详情页（如 /projects/p1rabbittowordpress）时，系统返回 HTTP 404 错误。

根本原因

该问题由两个层面的逻辑断裂叠加导致：

• 数据绑定层错误： 在 src/pages/projects.astro 列表页渲染时，<HorizontalCard> 组件的 url 属性被错误地绑定为 project.data.url。这导致组件去 Markdown 的 Frontmatter (头部区域) 寻找不存在的硬编码 URL，而没有使用 Astro 自动从文件名生成的 slug 进行本地路由拼接。

• 视图层路由缺失： Astro 采用严格的文件系统路由机制。虽然 src/content/projects/ 目录下存在数据源（Markdown 文件），但 src/pages/ 目录下缺失了对应的动态路由承接文件。系统不知道如何将带有 slug 的 URL 映射到具体的 HTML 模板上。

修复方法

步骤 1：修复入口链接生成逻辑 修改 src/pages/projects.astro，将硬编码字段替换为动态路径拼接。

url={project.data.url}
url={`/projects/${project.slug}`}

步骤 2：补全动态路由映射文件 新建 src/pages/projects/[slug].astro 文件。这是闭环的核心环节。 通过引入 getStaticPaths() 函数，在构建期（Build time）读取 projects 集合下的所有 Markdown 文件，并提前生成对应的静态路径参数。

// 核心路由生成代码片段
export async function getStaticPaths() {
  const projectEntries = await getCollection('projects');
  return projectEntries.map(entry => ({
    params: { slug: entry.slug },
    props: { entry },
  }));
}

结语

在基于文件系统路由的现代 SSG (静态站点生成) 框架中（如 Astro, Next.js App Router）：

1. 数据不等于页面：Content Collections 只负责定义和校验数据结构。数据必须通过 pages 目录下的动态路由文件（带有 [] 的文件）显式消费，才能转换为可访问的 URL。

2. 排错路径标准化：遇到内部页面 404，遵循标准的排查链路：查触发源（<a> 标签的 href 是否正确） -> 查路由表（src/pages 下的目录树是否对应） -> 查预渲染函数（getStaticPaths 是否正确返回了 params）。