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

概要

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

開発環境

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

エラー内容

• 画面にcomponentを表示だけの簡単な処理ですが次のエラーが発生しました。
• エラーは似ているが次のエラーとは少し違いました。
  [React / Next.js / Error] Type ‘XXX’ is not assignable to type ‘IntrinsicAttributes & XXX’. のエラー

• そして次がソースコードです。

import Component from './component'

export default function Home() {
  return (
    <Component testText="testです。"/>
  );
}

export default function Component(testText : string) {
  return (
    <div>{testText}</div>
  );
}

参考

• [React / Next.js / Error] Type ‘XXX’ is not assignable to type ‘IntrinsicAttributes & XXX’. のエラー
• 「Type ‘string | undefined’ is not assignable to type ‘string’. Type ‘undefined’ is not assignable to type ‘string’」の解決方法
• TypeScript の困った型エラーを解消したい

原因

• Propsをstringに設定しても次のように設定されます。
  「testText : string」→「{ testText: string; }」
• それでtype「{ testText: string; }」に stringを代入しようとすることで
  type違いのエラーが発生しました。

対応

方法1. Props用のTypeを作成する

1. Props用のtypeを作成します。
2. propsのtypeを修正します。
3. div中身でpropsの取得方法を修正します。

# 1.Props用のtypeを作成
type TestProps = {
  testText : string
}

# 2.propsのtypeを修正します。
export default function Component(props : TestProps) {
  return (
    # 3.propsの取得方法を修正します。
    <div>{props.testText}</div>
  );
}

• それでエラーが解決されまして表示できるようになりました。

方法2. Propsを分割代入にする

1. propsを分割代入にします。
2. デフォルト値を設定します。

# 1.propsを分割代入にします。
# 2.デフォルト値を設定します。
export default function Component({testText = ""}) {
  return (
    <div>{testText}</div>
  );
}

• それでエラーが解決されまして表示できるようになります。

まとめ

• Propsを設定してcomponentを利用する際に、
  Type ‘XXX’ is not assignable to type ‘XXX’. のエラーが発生した場合の対応をまとめました。
• 方法1, 2どちらでも問題はありませんが、
  変数の数が多いまたはほかでも利用されるなら方法1
  変数が少なく簡単に対応したい場合は方法2
  で対応すればいいかなと思います。