[React / Next.js / Error] Type ‘XXX’ is not assignable to type ‘IntrinsicAttributes & XXX’. のエラー

[React / Next.js / Error] Type ‘XXX’ is not assignable to type ‘IntrinsicAttributes & XXX’. のエラー

概要

  • componentを画面に表示しようとしたらProps設定に次のエラーが発生しました。
  • 結果としてはPropsの使い方の問題だったので解決するまでの対応を整理しました。

開発環境

  • React 19.0.0-rc-69d4b800-20241021
  • Next.js 15.0.1
  • VS Code

エラー内容

  • 画面にcomponentを表示だけの簡単な処理ですが次のエラーが発生しました。
  • それに開発環境(VS Code)上では次のエラーが発生しますが、
    画面ではエラーは発生せず何も表示されないだけでした。
  • 以前対応したエラーとはエラー内容は似ているようでしたが違うエラーのようです。
    [React / Next.js / Error] Type ‘XXX’ is not assignable to type ‘XXX’. のエラー
  • そして次がソースコードです。
src\app\test\TestProps.tsx
export type TestProps = {
  test1 : string
  test2 : number
  test3 : boolean
}
  • booleanはそのままでは表示されないので少し工夫が必要です。
src\app\test\component.tsx
import { TestProps } from "./TestProps"

export default function component(props : TestProps) {
  return (
    <>
      <div>{props.test1}</div>
      <div>{props.test2}</div>
      <div>{props.test3&&"true"}</div>
    </>
  );
}
src\app\test\page.tsx
import { TestProps } from "./TestProps"
import Component from './component'

export default function Home() {
  const testProps : TestProps = {
    test1 : "test",
    test2 : 1,
    test3 : true
  }

  return (
    <Component testProps={testProps}/>
  );  
}

参考

原因

  • Props、Componentまでは問題ないですが、
    page側で利用するところでの知識不足でした。

対応

方法1. Propsの各項目を分けて設定する

  1. 各データを「データ名 = {データ}」で分けて設定します。
  2. 今回はTestPropsタイプ testPropsのtest1、test2、test3を一つずつ設定しました。
src\app\test\page.tsx
import { TestProps } from "./TestProps"
import Component from './component'

export default function Home() {
  const testProps : TestProps = {
    test1 : "test",
    test2 : 1,
    test3 : true
  }

  // 1. 各データを「データ名 = {データ}」で分けて設定します。
  return (
    <Component 
      test1={testProps.test1} 
      test2={testProps.test2} 
      test3={testProps.test3}/>
  );  
}
  • それでエラーが解決されまして表示できるようになりました。

方法2. {…}構文を利用する

  1. {…} 構文を利用してtestPropsの各データを一つずつ分けて設定します。
src\app\test\component.tsx
import { TestProps } from "./TestProps"
import Component from './component'

export default function Home() {
  const testProps : TestProps = {
    test1 : "test",
    test2 : 1,
    test3 : true
  }

  // 1. {...}構文を利用してtestPropsの各データを一つずつ分けて設定します。
  return (
    <Component {...testProps}/>
  );  
}
  • それでエラーが解決されまして表示できるようになります。

まとめ

  • Propsを設定してcomponentを利用する際に、
    Type ‘XXX’ is not assignable to type ‘IntrinsicAttributes & XXX’. のエラーが
    発生した場合の対応をまとめました。
  • 方法1, 2どちらでも解決はできますが
    • Propsタイプのデータが多かったり、
    • typeの変更時には変更に合わせて対応が発生する
  • などを考えると個人的には方法2がおすすめです。