React+TS报错：Property 'contactList'不存在于IntrinsicAttributes类型求助

这个报错的核心原因是：你给<ContantList>组件传递了contactList属性，但该组件没有声明对应的props类型，TypeScript默认只允许React内置属性（比如key、ref），因此不认你自定义的contactList。

下面是具体解决步骤：

1. 给ContactList组件定义props类型 #

在ContactList.tsx文件中，明确声明组件接受的props类型，确保和父组件的Contact结构一致：

// ContactList.tsx
import React from 'react';

// 定义单个联系人的类型
interface Contact {
  name: string;
  email: string;
}

// 定义组件的props类型
interface ContactListProps {
  contactList: Contact[];
}

// 使用React.FC泛型约束组件的props
const ContactList: React.FC<ContactListProps> = ({ contactList }) => {
  // 编写渲染逻辑，比如遍历contactList生成列表项
  return (
    <>
      {contactList.map((item, idx) => (
        <li key={idx}>
          {item.name} - {item.email}
        </li>
      ))}
    </>
  );
};

export default ContactList;

2. 修复组件导入的拼写错误 #

你当前父组件中导入的是ContantList（拼写少了一个c，正确应为ContactList），同时JSX中使用的也是错误的组件名，需统一修正：

// 父组件中修正导入语句
import ContactList from "./ContactList";

// 渲染时使用正确的组件名
<ContactList contactList={contactList}/>

3. 优化：共享类型定义（可选） #

为避免重复定义Contact接口，可将类型抽成单独文件（比如src/types.ts）：

// src/types.ts
export interface Contact {
  name: string;
  email: string;
}

之后在父组件和子组件中导入该类型：

• 父组件：import { Contact } from './types';
• 子组件：import { Contact } from './types';

这样能保证类型一致性，后续修改也更便捷。

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