TypeScript传递组件Props时如何避免‘无法读取未定义属性’错误

核心原因分析 #

• 父组件传递的stepOne为undefined：你的DVTStepperType中stepOne是可选属性（带?），但子组件StepOne的Props类型定义里要求stepOne是必填的StepOneData，如果父组件没传值或初始状态为undefined，就会触发错误。
• 异步数据加载延迟：如果stepOne是通过异步请求获取的，组件初始渲染时数据还未返回，此时stepOne处于undefined状态。

具体解决方案 #

1. 给子组件Props添加可选标记并做空值判断 #

修改子组件的Props类型，允许stepOne为undefined，并在渲染前做兜底处理：

import { StepOneData, DVTStepperType } from '../customStepper/DVTStepperType';
import { classes } from '../styles';

// 允许stepOne为undefined
type StepOneProps = {
  stepOne?: StepOneData;
};

const StepOne: React.FC<StepOneProps> = ({ stepOne }) => {
  // 为空时返回加载提示或空内容
  if (!stepOne) {
    return <div>加载中...</div>;
  }

  return (
    <div className={classes['space-between']}> {/* 修复样式类的使用方式 */}
      <p>Project Title: {stepOne.short_title}</p>
      {/* 其他字段渲染逻辑 */}
    </div>
  );
};

export default StepOne;

2. 使用可选链操作符快速兜底 #

如果不想添加额外判断逻辑，可以用可选链?.访问属性，配合空值合并操作符??设置默认值：

const StepOne: React.FC<StepOneProps> = ({ stepOne }) => {
  return (
    <div className={classes['space-between']}>
      <p>Project Title: {stepOne?.short_title ?? '无标题'}</p>
      {/* 其他字段用?.访问，??设置默认值避免空内容 */}
    </div>
  );
};

3. 确保父组件传递有效数据 #

检查父组件的传递逻辑，避免传递undefined：

• 初始化状态时给stepOne设置符合类型的默认值：

// 父组件示例
import { useState } from 'react';
import StepOne from './StepOne';
import { StepOneData } from '../customStepper/DVTStepperType';

const ParentComponent = () => {
  // 初始化符合StepOneData类型的默认值，而非undefined
  const [stepOneData, setStepOneData] = useState<StepOneData>({
    id: 0,
    number: 0,
    project_title: '',
    DVT: false,
    catalog: false,
    start_date: new Date(),
    end_date: new Date(),
    TG_TE_number: 0,
    budget: 0,
    short_title: '',
    short_description: '',
    department: '',
    costs_ran_on: '',
    documentation: [],
    report: [],
    project_report_sending: '',
    status_id: 0,
    client_location_id: 0,
    overall_contact_person: '',
    representative: '',
    other_authorized_persons: [],
  });

  return <StepOne stepOne={stepOneData} />;
};

• 异步加载场景下，等待数据返回后再渲染子组件：

// 父组件异步加载示例
const ParentComponent = () => {
  const [stepOneData, setStepOneData] = useState<StepOneData | undefined>(undefined);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 模拟异步请求
    fetch('/api/step-one')
      .then(res => res.json())
      .then(data => {
        setStepOneData(data);
        setLoading(false);
      });
  }, []);

  if (loading) {
    return <div>加载中...</div>;
  }

  // 确保数据存在再传递给子组件
  return stepOneData ? <StepOne stepOne={stepOneData} /> : <div>数据加载失败</div>;
};

4. 修复组件语法错误 #

注意你的JSX中<div space-between>是错误写法，样式类需要通过className属性应用：

// 错误写法
<div space-between>
// 正确写法（假设classes对象中存在space-between类）
<div className={classes['space-between']}>

内容的提问来源于stack exchange，提问作者Razvan Razvi