React向子组件传值报错Cannot read properties of undefined求助

DevOps 小满

2026-10-2

问题根因梳理

1. 传值逻辑和子组件接收逻辑不匹配

你父组件用{...company}把company对象的属性展开传递，相当于直接给子组件传了name={company.name} email={company.email}这类顶层属性，但你的子组件内部是从props.company.name取值，期望接收一个名为company的完整对象属性，二者完全不匹配。

2. 初始值错误导致渲染报错

父组件中company的初始值设置为空字符串''：

const [company, setCompany] = useState<any>('');

首次渲染时后端请求还未返回，company是空字符串，不管是展开传值还是直接传对象，空字符串都不存在你需要的name/email等属性，自然会报属性读取错误。

3. 子组件类型定义失效

你已经定义了CardProps接口，但子组件参数类型写的是props: CompanyModel，没有用到自定义接口，类型校验完全没有生效。

修复方案

第一步：修改父组件逻辑

修正传值方式和初始值定义：

// 修正初始值为null，类型改为正确的CompanyModel可选类型
const [company, setCompany] = useState<CompanyModel | null>(null);

将原来的展开传值改为直接传递完整company对象：

{/* 原来的错误写法 */}
{/* <AdminCard  {...company} />  */}
{/* 修正后写法 */}
<AdminCard company={company} />

第二步：修改子组件逻辑

修正类型定义，增加空值判断避免报错：

interface CardProps {
  company?: CompanyModel;
}
// 修正参数类型为自定义的CardProps
export default function ImgMediaCard(props: CardProps) {
  // 无company数据时返回空或者加载占位
  if (!props.company) return null;

  return (
    <Card sx={{ maxWidth: 345 }}>
      <CardMedia
        component="img"
        alt="green iguana"
        height="180"
        image={CompanyImage}
      />
      <CardContent>
        <Typography gutterBottom variant="h5" component="div">
          {props.company.name}
        </Typography>
        <Typography variant="body2" color="text.secondary">
          {props.company.email}
        </Typography>
      </CardContent>
      <CardActions>
        <Button size="small">DELETE COMPANY</Button>
      </CardActions>
    </Card>
  );
}

内容的提问来源于stack exchange，提问作者Anthony K