React报错Objects are not valid as a React child解决方法（MUI Timeline场景）

• 核心错误位于TimelineDot组件内部的{WorkIcon}写法：从@mui/icons-material导入的WorkIcon是组件类本身，属于对象类型，你没有将其转换为可渲染的React元素（即未使用<WorkIcon />的JSX标签语法实例化），React无法直接渲染组件对象，因此触发对应报错。
• 代码中import { render } from '@testing-library/react'属于测试工具导入，在业务组件中无实际作用，属于冗余代码。

仅需修改2处即可解决报错：将{WorkIcon}改为<WorkIcon />，删除无用的render导入，修改后的完整代码如下：

import React from 'react';
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import WorkIcon from '@mui/icons-material/Work';
import { Typography } from '@material-ui/core';

import './Timeline.css';

const CustomTimeline = ({title, children}) => {
    return (
      <Timeline className={'timeline'}>
      { /* Item Header */ }
      <TimelineItem className={'timeline_firstItem'}>
        <TimelineSeparator>
          <TimelineDot className={'timeline_dot_header'}>
            <WorkIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
          <Typography variant='h6' className={'timeline_header'}>
            {title}
          </Typography>
        </TimelineContent>
      </TimelineItem>
      {children}
    </Timeline>
    );
};

export const CustomTimelineSeparator = () => {
  return (
    <TimelineSeparator className={'separator_padding'}>
      <TimelineDot variant={'outlined'} className={'timeline_dot'} />
      <TimelineConnector />
    </TimelineSeparator>
  );
};

export default CustomTimeline;

如果你的项目使用MUI v5版本，建议将import { Typography } from '@material-ui/core'替换为import { Typography } from '@mui/material'，避免新旧版本依赖混用引发的样式、兼容性异常。

内容的提问来源于stack exchange，提问作者Albert Ramadhan