propsが渡ってこないときの原因と対策

2か月 ago

user

1 minute

propsが undefined になる主な理由とそのチェックポイント

❓ よくある症状

原因	説明	対策例
親から渡していない	JSXにpropsを指定し忘れている	`<Child name="Takuma" />` を確認
props名のスペルミス	小文字・大文字の違い、キャメルケース崩れなど	`name` と `Name` は別物
構造分割でミスしている	`props` 全体ではなく `props.name` を使っているのに`name`がない	`({ name })` か `props.name` のどちらかに統一
テスト時のpropsの渡し忘れ	JestやRTLでコンポーネントをテストする際にprops未指定	テストコードで props を明示的に渡す
デフォルト値が必要な型定義ミス（TypeScript）	optionalでないのに未指定になっている	`name?: string` か、`defaultProps` で補完
子コンポーネントの受け取りコードの書き間違い	`function Component(props)` を `function Component()` にしてしまっている	正しく `props` を受け取っているか確認

// 親コンポーネント
<Child />

// 子コンポーネント
const Child = ({ name }) => {
  return 
<p>Hello, {name}</p>
}

結果 → Hello, undefined

✅ 修正：

<Child name="拓磨" />

const Child = (props) => {
  const { Name } = props  // ← 大文字スペルミス
  return 
<p>{Name}</p>
}

✅ 修正：

const Child = ({ name }) => {
  return 
<p>{name}</p>
}

render(<GreetingForm />) // ← nameを渡していない

✅ 修正：

render(<GreetingForm name="Test" />)

type Props = {
  name: string  // 必須
}

const Component = ({ name }: Props) => {
  return 
<p>{name}</p>
}

✅ 対策①：propsを optional にする

type Props = {
  name?: string
}

✅ 対策②：defaultProps で補完（関数コンポーネントでは useMemo 等を使って手動で補完）

🔗 参考