Astro SSR动态路由非存在URL报错问题排查与解决

问题原因 #

当访问不存在的URL时，后端GraphQL接口返回的data.page为undefined或null，此时data.page?.type无有效值，导致组件映射逻辑找不到对应组件，最终抛出组件未定义的错误。

解决方案 #

需要在两个关键节点做校验处理，确保无论请求是否合法，都有对应组件可渲染：

1. 提前判断页面是否存在，返回404状态码
   在Page.astro中先检查data.page是否存在，若不存在则直接设置HTTP 404状态码，并渲染404页面组件。

2. 组件映射添加默认兜底
   给组件映射表设置默认的NotFound组件，避免因type无效或不存在导致组件为undefined。

具体代码示例 #

Page.astro

---
import PageOne from './PageOne.astro';
import PageTwo from './PageTwo.astro';
import NotFound from './NotFound.astro';

// 定义合法的组件映射表
const componentMap = {
  pageOne: PageOne,
  pageTwo: PageTwo,
};

// 通过Apollo Client获取页面数据的逻辑
const { data } = await client.query({
  query: GET_PAGE_QUERY,
  variables: { slug: Astro.props.slug },
});

// 处理页面不存在的情况：设置404状态码
if (!data.page) {
  Astro.response.status = 404;
}

// 安全获取对应组件，兜底用NotFound
const TargetPage = componentMap[data.page?.type] || NotFound;
---

{/* 根据情况渲染目标组件或404 */}
{data.page ? <TargetPage pageData={data.page} /> : <NotFound />}

[...slug].astro

---
import Layout from '../layouts/Layout.astro';
import Page from '../components/Page.astro';
---

<Layout>
  <Page slug={Astro.params.slug} />
</Layout>

额外注意事项 #

• 确保NotFound.astro组件已正确创建并导入，用来展示自定义404页面内容。
• 设置Astro.response.status = 404非常重要，它会让服务器返回标准404 HTTP状态码，对SEO和用户体验更友好。
• 如果GraphQL查询可能抛出错误，建议用try/catch包裹查询逻辑，避免因请求失败导致额外报错。

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