I'm still getting error from **getStaticProps** #26341
Description
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)