TypeScript报错：返回类型'unknown'不是有效JSX元素的问题排查

核心错误原因 #

你的代码存在三个关键问题，共同导致了TypeScript报错：

1. Content组件类型定义错误：你将组件返回类型声明为unknown，但React组件必须返回有效的JSX元素或React.ReactNode类型。同时，props的类型定义错误，courseParts应该是CoursePart[]数组，而非自定义的interfacePart。

2. Part组件遍历逻辑错误：使用forEach遍历数组时，forEach本身返回undefined，而非你期望的JSX元素数组。React组件无法渲染undefined或unknown类型的返回值。

3. types.ts中错误定义interfacePart：这个接口完全不符合数组的实际结构，混淆了数组方法和自身属性，导致类型推断混乱。

修正后的代码 #

1. Content组件（修正类型与返回值）

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

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

export default Content

2. Part组件（替换forEach为map，修正props类型）

import { CoursePart } from '../types'
import React from 'react'

const Part = ({ courseParts }: { courseParts: CoursePart[] }) => {
  return (
    <>
      {courseParts.map((part) => (
        <div key={part.name}>
          {part.name}
        </div>
      ))}
    </>
  )
}

export default Part

注：移除了冗余的switch判断，因为所有case的渲染逻辑完全一致。如果后续需要根据不同part类型渲染差异化内容，可以保留switch并结合TypeScript类型守卫。

3. types.ts（删除错误的interfacePart）

export interface Title {
    courseName: string
}

export interface CoursePartBase {
  name: string;
  exerciseCount: number;
  type: string;
}

export interface CoursePartBaseDescription extends CoursePartBase {
  description?: string;
}

export interface CoursePartOne extends CoursePartBaseDescription {
  name: "Fundamentals";
}

export interface CoursePartTwo extends CoursePartBase {
  name: "Using props to pass data";
  groupProjectCount: number;
}

export interface CoursePartThree extends CoursePartBaseDescription {
  name: "Deeper type usage";
  description?: string;
  exerciseSubmissionLink: string;
}

export interface CoursePartFour extends CoursePartBaseDescription {
  name: "Advanced";
}

export interface CourseSpecialPart extends CoursePartBaseDescription {
  name: "Backend development";
  requirements: Array<string>;
}

export type CoursePart = CoursePartOne | CoursePartTwo | CoursePartThree | CoursePartFour | CourseSpecialPart;

额外优化建议 #

• 给map遍历的元素添加唯一key属性（示例中用了part.name，确保每个name唯一即可）
• 若后续需要根据不同CoursePart类型渲染差异化内容，可使用TypeScript类型守卫，例如：

{courseParts.map((part) => {
  if (part.name === "Fundamentals") {
    return <div key={part.name}>{part.name} - {part.description}</div>
  }
  if (part.name === "Using props to pass data") {
    return <div key={part.name}>{part.name} - 小组项目数: {part.groupProjectCount}</div>
  }
  // 其他类型处理
  return <div key={part.name}>{part.name}</div>
})}

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