最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to type the getStaticProps function when using getStaticPaths params? - Stack Overflow

programmeradmin3浏览0评论

I working on the following piece of code:

It's a blogPost dynamic page: /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
    }
  });
};

This is the error I'm getting:

It seems that the GetStaticProps type is generic and can be customized for my types.

I created those two types to try to customize the GetStaticProps type:

type ContextParams = {
  slug: string
}

type PageProps = {
  blogPost: null | Types.BlogPost.Item
}

Here is what I'm trying:

export const getStaticProps: GetStaticProps<PageProps,ContextParams> = async (context) => {
  const slug = context.params.slug;
  const blogPost = await getBlogPostFromSlug({slug});
  return ({
    props: {
      blogPost
    }
  });
};

But it still thinks that params might be undefined. Should I just deal with it? From the code above, does it seem like params could be undefined? I wasn't expecting that.

I working on the following piece of code:

It's a blogPost dynamic page: /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
    }
  });
};

This is the error I'm getting:

It seems that the GetStaticProps type is generic and can be customized for my types.

I created those two types to try to customize the GetStaticProps type:

type ContextParams = {
  slug: string
}

type PageProps = {
  blogPost: null | Types.BlogPost.Item
}

Here is what I'm trying:

export const getStaticProps: GetStaticProps<PageProps,ContextParams> = async (context) => {
  const slug = context.params.slug;
  const blogPost = await getBlogPostFromSlug({slug});
  return ({
    props: {
      blogPost
    }
  });
};

But it still thinks that params might be undefined. Should I just deal with it? From the code above, does it seem like params could be undefined? I wasn't expecting that.

Share Improve this question edited Apr 15, 2021 at 15:15 cbdeveloper asked Apr 15, 2021 at 15:02 cbdevelopercbdeveloper 31.5k44 gold badges198 silver badges396 bronze badges 1
  • stackoverflow./a/70917652/3564935 – juniortan Commented May 11, 2023 at 15:28
Add a ment  | 

1 Answer 1

Reset to default 9

The types are defined such that the params variable must still be undefined even when you declare the type for the params Q. From the types file:

export type GetStaticPropsContext<Q extends ParsedUrlQuery = ParsedUrlQuery> = {
  params?: Q
...

So if you want to be safe then you should assume that you might not have params. I would use the notFound or redirect properties explained here to handle requests with with missing params. You also want to handle cases where your async function getBlogPostFromSlug was rejected.

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
  };
};

Typescript Playground Link

发布评论

评论列表(0)

  1. 暂无评论