I'm still getting error from getStaticProps #26341

lucaoskaique · 2021-06-18T20:07:02Z

I'm still getting error from getStaticProps

Type '(context: GetStaticPropsContext) => Promise<{ props: ImagePost | undefined; }>' is not assignable
to type 'GetStaticProps<PageProps, StaticPathParams>'.
Type 'Promise<{ props: ImagePost | undefined; }>' is not assignable to type 'GetStaticPropsResult | Promise<GetStaticPropsResult>'.
Type 'Promise<{ props: ImagePost | undefined; }>' is not assignable to type 'Promise<GetStaticPropsResult>'.
Type '{ props: ImagePost | undefined; }' is not assignable to type 'GetStaticPropsResult'.
Type '{ props: ImagePost | undefined; }' is not assignable to type '{ props: PageProps; revalidate?: number | boolean | undefined; }'.
Types of property 'props' are incompatible.
Type 'ImagePost | undefined' is not assignable to type 'PageProps'.
Type 'undefined' is not assignable to type 'PageProps'.ts(2322)

`

export interface ImagePost {
    title: string;
    slug: string;
    date: string;
    path: string;
}

export const imagesPost: ImagePost[] = [
    {
        title: 'Colours-1',
        slug: 'my-first',
        date: new Date().toString(),
        path: '/images/Colours/Colours-1.jpg'
    },
    {
        title: 'Colours-2',
        slug: 'my-second',
        date: new Date().toString(),
        path: '/images/Colours/Colours-2.jpg'
    },
    {
        title: 'Colours-3',
        slug: 'my-third',
        date: new Date().toString(),
        path: '/images/Colours/Colours-3.jpg'
    },
]

import { GetStaticPaths, GetStaticProps } from "next";
import Head from "next/head";
import Image from "next/image";
import { ImagePost, imagesPost } from "../../lib/data";
import { ParsedUrlQuery } from "querystring";

export default function ImagePage({ title, slug, date, path }: ImagePost) {
  return (
    <div>
      <Head>
        <title>{title}</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <Image
          src={path}
          height={400}
          width={400}
          alt="Picture of Album Colors"
        />
        <h1>{path}</h1>
        <h1>{date}</h1>
        <h1>{slug}</h1>
      </main>
    </div>
  );
}

interface PageProps {
  pageData: string;
}

interface StaticPathParams extends ParsedUrlQuery {
  slug: string;
}

export const getStaticProps: GetStaticProps<PageProps, StaticPathParams> = async (
  context
) => {
  console.log("hi!", context);
  const params = context.params as StaticPathParams;
  console.log("hi!", params);
  return {
    props: imagesPost.find((item) => item.slug === params.slug),    
  };
};

export const getStaticPaths: GetStaticPaths<StaticPathParams> = async () => {
  return {
    paths: imagesPost.map((item: { slug: string }) => ({
      params: {
        slug: item.slug,
      },
    })),
    fallback: false,
  };
  //   console.log(JSON.stringify(foo, null, ' '));
  //   return foo;
};

`

Originally posted by @C7hulhu in #16522 (reply in thread)

The text was updated successfully, but these errors were encountered:

timneutkens · 2021-06-20T16:55:35Z

The typing is correct, you're returning undefined for props. I've fixed your code and added a comment:

export const getStaticProps: GetStaticProps<PageProps, StaticPathParams> = async (
  context
) => {
  console.log("hi!", context);
  const params = context.params as StaticPathParams;
  console.log("hi!", params);
  return {
    // `.find` can return undefined
    props: imagesPost.find((item) => item.slug === params.slug) ?? {},    
  };
};

lucaoskaique · 2021-06-20T21:13:41Z

The typing is correct, you're returning undefined for props. I've fixed your code and added a comment:

export const getStaticProps: GetStaticProps<PageProps, StaticPathParams> = async (
  context
) => {
  console.log("hi!", context);
  const params = context.params as StaticPathParams;
  console.log("hi!", params);
  return {
    // `.find` can return undefined
    props: imagesPost.find((item) => item.slug === params.slug) ?? {},    
  };
};

Omg, so basic, thanks for your time to look it up, man 🙏🙏

balazsorban44 · 2022-01-28T05:05:49Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens closed this as completed Jun 20, 2021

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

I'm still getting error from getStaticProps #26341

I'm still getting error from getStaticProps #26341

lucaoskaique commented Jun 18, 2021

timneutkens commented Jun 20, 2021 •

edited

Loading

lucaoskaique commented Jun 20, 2021

balazsorban44 commented Jan 28, 2022

I'm still getting error from **getStaticProps** #26341

I'm still getting error from **getStaticProps** #26341

Comments

lucaoskaique commented Jun 18, 2021

timneutkens commented Jun 20, 2021 • edited Loading

lucaoskaique commented Jun 20, 2021

balazsorban44 commented Jan 28, 2022

I'm still getting error from getStaticProps #26341

I'm still getting error from getStaticProps #26341

timneutkens commented Jun 20, 2021 •

edited

Loading