在 Next.js 页面中正确键入道具

Question

I have a fairly straight forward SSR-generated Next.js page. My typing is not correct somewhere along the path here, and the linter is complaining.

export interface ProposalTag {
  id: number;
  name: string;
  hex: string;
  color: string;
}

export async function getProposalTags(): Promise<ProposalTag[]> {
  // query for response

  const tags = response?.data?.proposal_tags.map((tag: ProposalTag) => {
    return {
      id: tag.id,
      name: tag.name,
      hex: tag.hex,
      color: tag.color,
    };
  });

  return tags;
}



export const getServerSideProps: GetServerSideProps = async context => {
  const proposalTags: ProposalTag[] = await getProposalTags();

  return {
    props: {
      proposalTags,
    },
  };
};

const Proposal: NextPage = ({ proposalTags }) => { /* code */ }

In this particular case, the linter is complaining with the following:

Property 'proposalTags' does not exist on type '{}'

I'm not entirely sure what I can do to please the typescript interpreter/linter here

Answer 1

NextPage is a generic type with optional generic parameters, and the first one is the prop types for the component:

const Proposal: NextPage<{
    proposalTags: ProposalTag[];
}> = ({ proposalTags }) => { /* code */ }