【TypeScript】Reactのコンポーネントに値を渡すとIntrinsicAttributesに代入できないと怒られる

Question

前提・実現したいこと

子コンポーネント(UI側)にデータを渡したいです。

発生している問題・エラーメッセージ

子コンポーネント(UI側)へ変数を入れると下記メッセージがVSCode上で指摘されます

Type '{ result: dammyType[]; }' is not assignable to type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'.
  Property 'result' does not exist on type 'IntrinsicAttributes & dammyType[] & { children?: ReactNode; }'

（7.11追記：↑すみません、エラー内容に修正ありです。テラテイルへ投稿後にProps側にもdammyType[]を代入していました。その場合エラーメッセージに「dammyType[]」の記載もされるようになっており記載もれしていました。）

上記のように怒られます。

該当のソースコード

containers/Element/element.tsx側

import React, { FC } from 'react';
import Element from '../../../components/pages/Element/element';
import dammyData, { dammyType } from '../../../seed/dammy';

const getData = (): dammyType[] => {
  //本来はデータをsortしてからreturnする処理が入る
  return dammyData;
}

const ElementContainer: FC = () => {
  const result = getData();

  return <Element result={result} />;
};

export default ElementContainer;

<Element result={result} />の「result={result}のresult=」に対して怒られています。

dammyData と { dammyType } ファイル中身は以下の通りです

const dammyData = [
    {
      FoodGroup: 1,
      FoodNumber: '01001',
      id: 1,
    },
    {
      FoodGroup: 2,
      FoodNumber: '01002',
      id: 2,
    },
];

export interface dammyType {
  FoodGroup: number,
  FoodNumber: string,
  id: number
}

export default dammyData;

必要でない情報とは思いますが実際には２０００個以上の４０要素ずつのデータが格納されたものを扱う予定です。まずは簡易化して動かそうとしています。

試したこと

データのボリュームが大きくて分からなかったため簡易的なdammyデータで試しています。

補足情報（FW/ツールのバージョンなど）

React+TypeScriptです。
cssはEmotion
バックエンドはFirebaseを利用します

追記：Reactの型に"@types/react": "^16.9.0"を使っています。

追記１：<Element />側のソースコード

components/Element/element.tsx側

/** @jsx jsx */
import { Fragment, FC } from 'react';
import { css, jsx } from '@emotion/core';

import Header from '../../common/templates/header';
import Footer from '../../common/templates/footer';
import SocialBtn from '../../common/parts/button/social';
import StuffFilter from '../../common/parts/filter/stuffFilter';

import { Font } from 'components/common/styles/CssValue';
import { dammyType } from '../../../seed/dammy';

//cssの記述を省略

const Element: FC<dammyType[]> = ({result}) => (
  <Fragment>
    <Header />
    <div css={content}>
      <div css={titleH1}>
        //titleのテキスト
      </div>
      <div css={socialSpace}>
        <SocialBtn />
      </div>
      <div css={article}>
        <p>
　　　　　　//記事のテキスト
        </p>
      </div>
      <div>
        //孫コンポーネント(<StuffFilter />)へ渡す予定ですがひとまずここでpropsを表示させたい
        {result}
      </div>
    </div>
    <Footer />
  </Fragment>
);

export default Element;

子コンポーネント側ではエラー表示はありませんが上記のようになっています。
追記：props側のresult、分割代入の形{result}へ修正しました。その場合の警告メッセージは以下の通りです。

Property 'result' does not exist on type 'dammyType[] & { children?: ReactNode; }'.

追記２：App.tsx側のソースコード追加

App.tsx側にもエラーが表示されていたので追記です。→Component側ではなくContainer側のコンポーネントを呼び出すことで解決。依然として、質問のエラーは残っています。

Type '{}' is missing the following properties from type 'dammyType[]': length, pop, push, concat, and 28 more.ts(2740)

/** @jsx jsx */
import { FC } from 'react';
import { css, jsx } from '@emotion/core';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Font, Color } from './components/common/styles/CssValue';

import './components/common/styles/ress.css';
import Home from './components/pages/Home/home';
import ElementContainer from './containers/pages/Element/element';

//cssの省略

const App: FC = () => (
  <div css={Global}>
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/elm">
          <ElementContainer />
        </Route>
      </Switch>
    </BrowserRouter>
  </div>
);
export default App;

Comments

[mottox2]

子要素のElement側の型定義が不足している可能性があるので、Elementのソースも掲載してもらえますか？

[moimoi_sushi]

指摘ありがとうございます、Element側のソースも載せました。

Answer 1

Element コンポーネントの props の受け取り方の記載の仕方の問題かと思います。

まず、FCのジェネリクスの基本についてですが、

const SomeComponent: FC<SomePropsType> = (props) => (

とした場合、props の型が SomePropsType です。

質問者さんのコードを見ると {result} の型を dammyType[] として見ており、当然 dammyType[] はリストなので、result というキーは存在せずエラーになっています。

以下のように props 用の型定義すれば受け取れるかと思います。

const Element: FC<{result: dammyType[]}> = ({result}) => (

Comments

[moimoi_sushi]

ありがとうございます！怒られなくなりました。
理解が足りておらずブランケットのところまで考慮できていませんでした。

コード自体は下記のようにinterfaceを用いてpropsを扱うことにしました。
interface dammyTypeProps {
result: dammyType[]
}

const Element: FC<dammyTypeProps> = ({result}) => ( //略 );