typescript react 型エラー

Question

以下のコードなんですが、型エラーが出てしまい、それを検索しても要領を得ず困っています。解決方法ご教授してくださると幸いです。

const Teams = ({ data }: InferGetServerSidePropsType<typeof getServerSideProps>) => {
  return <PageTeam props={data} />
}

export async function getServerSideProps(context: any) {
  const data = await fetchTeam(context.params.id)
  return {
    props: {
      data,
    },
  }
}

export const PageTeam = (props: IFetchTeamResponse) => {
}

以下のようなエラーが出てしまいます。

型 '{ props: IFetchTeamResponse; }' を型 'IntrinsicAttributes & IFetchTeamResponse' に割り当てることはできません。

プロパティ 'props' は型 'IntrinsicAttributes & IFetchTeamResponse' に存在しません。

どうすれば解決できるでしょうか…？

Comments

[maisumakun]

PageTeamの定義はどのようになっていますか？

[maisumakun]

「<PageTeam props={data} />」ですが、「props全体をdataにしたい」のでしょうか？それとも、「props.propsにdataを設定する」ということでしょうか？

[violineer]

「props.dataにdataを設定したい」です
pageteam内でprops.data
としてdataオブジェクトにアクセスしたい
といった感じです…

Answer 1

まずpropsの渡し方が違います

<Hoge foo={1} bar="a"/>

とするとHogeの方で

const {foo,bar} = this.props

となるので、

<PageTeam data={data} />

とするのが正しいです。

また、propsの型を指定する必要があります

const Hoge = (props:{foo:number,bar:string}) => {...}

質問者様はpropsの型をIFetchTeamResponseとしていますので、

const PageTeam = (props: IFetchTeamResponse) => {
}

IFetchTeamResponseにdataがなければ

<PageTeam data={data} />

と書いても別のtypeエラーになるはずなのでご注意ください

Answer 2

「props.dataにdataを設定したい」です

でしたら、<PageTeam data={data} />としてください。