React子组件Part无报错却不渲染问题排查

我正在开发一个渲染课程列表及详情的简易React应用，课程详情分为Header、Content、Total三个部分。其中Content组件的子组件Part无法渲染，但控制台与TypeScript均未抛出任何报错信息，请问该问题的原因是什么？

相关代码 #

App.js

import Header from './components/Header'
import Content from './components/Content'
import Total from './components/Total'
import { CoursePart } from './types'

const App = () => {
  const courseName = "Half Stack application development";
  const courseParts: CoursePart[] = [
    {
      name: "Fundamentals",
      exerciseCount: 10,
      description: "This is the easy course part",
      type: "normal"
    },
    {
      name: "Advanced",
      exerciseCount: 7,
      description: "This is the hard course part",
      type: "normal"
    },
    {
      name: "Using props to pass data",
      exerciseCount: 7,
      groupProjectCount: 3,
      type: "groupProject"
    },
    {
      name: "Deeper type usage",
      exerciseCount: 14,
      exerciseSubmissionLink: "https://fake-exercise-submit.made-up-url.dev",
      type: "submission"
    }
  ]
  return (
    <div>
      <Header courseName={courseName} />
      <Content courseParts={courseParts} />
      <Total courseParts={courseParts} />
    </div>
  );
};

export default App;

Content.tsx

import { interfacePart } from '../types'
import Part from './Part'

const Content = ({ courseParts }: {courseParts: interfacePart })  => {

  return (
 
    <div>
      <Part courseParts={courseParts} />
    </div>

  )
}

export default Content

Part.tsx

import { interfacePart } from '../types'

// eslint-disable-next-line react/prop-types
const Part = ({ courseParts }: {courseParts: interfacePart })  => {

  console.log(courseParts)
  return (
    <>
      {courseParts.forEach((part) => {
        switch (part.name) {
          case 'Fundamentals':
            return <div><p>{part.name} {part.exerciseCount}</p> </div>;

          case 'Advanced':
            return <div>{part.name}</div>;
          case 'Using props to pass data':
            return <div>{part.name}</div>;

          case 'Deeper type usage':
            return <div>{part.name}</div>;
          default:
            break;
        }
      })}
    </>
  );
}

export default Part

问题原因及修复方案 #

1. 核心问题：用forEach而非map生成JSX

forEach仅用于遍历数组执行回调，不会返回任何值（实际返回undefined），React无法渲染undefined，因此看不到任何内容。必须使用map方法，它会返回新数组，数组元素就是要渲染的JSX节点。

2. 类型定义不匹配隐患

App中传递的courseParts是CoursePart[]数组类型，但Content和Part组件的props声明为interfacePart。如果interfacePart是单个课程项的类型而非数组类型，这里存在类型不匹配——相当于把数组当作单个对象传递，后续逻辑会出错。正确类型应为interfacePart[]（若interfacePart是单个项类型），或直接用CoursePart[]保持一致。

3. Switch分支默认处理缺失

遇到未定义的课程名称时，switch的default分支无返回内容，建议返回null或空元素，避免潜在渲染异常。

修正后的Part.tsx示例 #

import { CoursePart } from '../types'

const Part = ({ courseParts }: {courseParts: CoursePart[] })  => {
  return (
    <>
      {courseParts.map((part, index) => {
        // 添加index作为key，避免React警告
        switch (part.name) {
          case 'Fundamentals':
            return <div key={index}><p>{part.name} {part.exerciseCount}</p></div>;
          case 'Advanced':
            return <div key={index}>{part.name}</div>;
          case 'Using props to pass data':
            return <div key={index}>{part.name}</div>;
          case 'Deeper type usage':
            return <div key={index}>{part.name}</div>;
          default:
            return null;
        }
      })}
    </>
  );
}

export default Part

修正后的Content.tsx示例 #

import { CoursePart } from '../types'
import Part from './Part'

const Content = ({ courseParts }: {courseParts: CoursePart[] })  => {
  return (
    <div>
      <Part courseParts={courseParts} />
    </div>
  )
}

export default Content

内容的提问来源于stack exchange，提问作者Julius Goddard