如何解决使用 getStaticPaths 参数时如何键入 getStaticProps 函数?
我正在处理以下代码:
这是一个 blogPost 动态页面:/post/[slug].tsx
export const getStaticPaths: GetStaticPaths = async () => {
const allSlugs = await getAllSlugs();;
return ({
paths: allSlugs.map((slug) => ({ params: { slug }})),fallback: "blocking"
});
};
export const getStaticProps: GetStaticProps = async (context) => {
const slug = context.params.slug;
const blogPost = getBlogPostFromSlug({slug});
return ({
props: {
blogPost
}
});
};
这是我得到的错误:
似乎 GetStaticProps
类型是通用的,可以针对我的类型进行自定义。
我创建了这两种类型来尝试自定义 GetStaticProps
类型:
type ContextParams = {
slug: string
}
type PageProps = {
blogPost: null | Types.BlogPost.Item
}
这是我正在尝试的:
export const getStaticProps: GetStaticProps<PageProps,ContextParams> = async (context) => {
const slug = context.params.slug;
const blogPost = await getBlogPostFromSlug({slug});
return ({
props: {
blogPost
}
});
};
但它仍然认为 params
可能是未定义的。我应该直接处理吗?从上面的代码来看,似乎 params
可能是未定义的?我没想到。
解决方法
类型的定义使得 params
变量仍然必须为 undefined
,即使您为参数 Q
声明了类型。来自the types file:
export type GetStaticPropsContext<Q extends ParsedUrlQuery = ParsedUrlQuery> = {
params?: Q
...
因此,如果您想安全,那么您应该假设您可能没有params
。我会使用 notFound
或 redirect
属性 explained here 来处理缺少 params
的请求。您还想处理 async
函数 getBlogPostFromSlug
被拒绝的情况。
export const getStaticProps: GetStaticProps<PageProps,ContextParams> = async (
context
) => {
const slug = context.params?.slug;
if (slug) {
try {
const blogPost = await getBlogPostFromSlug({ slug });
return {
props: {
blogPost
}
};
} catch (error) { }
}
return {
notFound: true
};
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。