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 undefinedpost_slug?.toUpperCase();
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;
console.log(entry.slug.toUpperCase())// We know that `entry.slug` is a string