Как набрать функцию getStaticProps при использовании параметров getStaticPaths?

Question

Я работаю над следующим фрагментом кода:

Это динамическая страница 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 тип:

      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может быть неопределенным? Я этого не ожидал.

Answer 1

Типы определены таким образом, что переменная все еще должна быть undefined даже когда вы объявляете тип для параметров Q. Из файла типов :

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

Поэтому, если вы хотите быть в безопасности, вы должны предположить, что у вас могло и не быть. Я бы использовал notFound или же redirectсвойства, описанные здесь, для обработки запросов с отсутствующими 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
  };
};

Ссылка на игровую площадку Typescript