TypeScript React组件传参报错：'job'属性不匹配类型定义

1. 确认JobsProps接口定义 #

先保证你的JobsProps接口与职位对象结构完全匹配：

interface JobsProps {
  id: number;
  title: string;
  location: string;
  fullTime: boolean;
  deadline: Date;
}

2. 给JobVacancy组件指定Props类型 #

你当前的组件未声明props类型，导致TypeScript无法识别传入的job属性。需要定义组件接收的props类型，并关联到JobsProps：

// 定义JobVacancy组件接收的props结构，包含job字段
interface JobVacancyProps {
  job: JobsProps;
}

// 为FC泛型指定JobVacancyProps类型
const JobVacancy: React.FC<JobVacancyProps> = ({ job }) => {
  // 组件内部可直接使用job的属性，如job.title、job.location等
  return (
    <div className="job-card">
      <h3>{job.title}</h3>
      <p>地点：{job.location}</p>
      <p>全职状态：{job.fullTime ? '全职' : '兼职'}</p>
      <p>截止日期：{job.deadline.toLocaleDateString()}</p>
    </div>
  );
};

3. 在Vacancies组件中正常传递props #

完成组件类型声明后，遍历数组传递job属性就不会触发报错了：

import { JobsProps } from './your-types-path';
import JobVacancy from './JobVacancy';

// 你的职位数据数组
const vacancies: JobsProps[] = [
  { id: 1, title: '前端开发工程师', location: '北京', fullTime: true, deadline: new Date('2024-12-31') },
  // 更多职位数据...
];

const Vacancies: React.FC = () => {
  return (
    <div className="vacancies-list">
      {vacancies.map(job => (
        <JobVacancy key={job.id} job={job} />
      ))}
    </div>
  );
};

报错核心原因 #

TypeScript无法识别未声明类型的组件props，显式定义JobVacancy的props类型后，TS会自动校验传入的job参数是否符合类型要求，同时还能在组件内部提供代码提示。

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