⇠ chan.dev / posts

Prefer props to params

🌱 This post is in the growth phase. It may still be useful as it grows up.

When generating pages with getStaticProps() you have access to Astro.params.

const {post_slug} = Astro.params

You can render these values into pages just fine but they can be undefined. Because Astro allows undefined as a value to match the bare subdirectory path (/).

In TypeScript—Astro apps, this leaves you writing a lot of checks for post_slug anywhere it’s used.

// could be undefined

Better to pass values along as props and validate their types.

export async function getStaticPaths() {
return [
params: { post_slug: "posts/prefer-props-to-params" },
props: { entry: /* full post */ },
interface Props {
entry: CollectionEntry<"post">
const { entry } = Astro.props;
// We know that `entry.slug` is a string