Passing prop with custom type, nextJS, typescript-CodePudding

I have an array containing JSON data which is fetched after a http call, I then assign its type to Service.

type Service = {
id?: string;
name?: string;
description?: string;
};

I make the api call in getServerSideProps and assign the Service type to data:

 export async function getServerSideProps() {
 const data: Service = (await getServices()).data;
 console.log(data);
 return {
     props: { data }, // will be passed to the page component as props
 };
}

However once the props are passed into the Page component it seems to have lost its type and I get the error message 'Property 'data' does not exist on type '{}'.'

data now seems to have the type 'any' ?

const DigitalServices: NextPage = ({ data }) => (

How do I get around this error, I know I can just do {data}: any but that defeats the point of using typescript? Thanks

CodePudding user response：

You should also specify the type of the prop that you're going to get in the component:

const DigitalServices: NextPage<{data: Service}> = ({ data }) => (