Typescript React传递Props时触发IntrinsicAttributes错误求助

错误原因 #

你遇到的报错是因为SearchItem组件未定义接收item属性的TypeScript类型，TypeScript默认将组件props类型推断为IntrinsicAttributes（无自定义props的基础类型），因此传入item会触发类型不匹配错误。

解决步骤 #

1. 为SearchItem组件定义Props类型 #

先明确SearchItem接收的props结构，创建对应接口并关联到组件：

// 导入已定义的HotelModel接口
import { HotelModel } from './path-to-your-model';

// 定义SearchItem的props类型
interface SearchItemProps {
  item: HotelModel;
}

// 让SearchItem组件使用该props类型
function SearchItem({ item }: SearchItemProps): JSX.Element {
  // 组件内部可安全使用item的属性，如item.name、item.rating等
  return (
    <div className="search-item-card">
      <h2>{item.name}</h2>
      <span>评分: {item.rating}</span>
    </div>
  );
}

2. 优化List组件的数组遍历逻辑 #

确保data存在时再执行遍历，避免空值报错：

function List(): JSX.Element {
  const { data, loading, error } = useFetch(`hotel?city=${destination}`);

  return (
    <div>
      <div className="listResult">
        {loading ? (
          'Loading'
        ) : error ? (
          <p>加载失败: {error.message}</p>
        ) : data?.length ? (
          data.map((item: HotelModel) => (
            <SearchItem item={item} key={item._id} />
          ))
        ) : (
          <p>未找到符合条件的酒店</p>
        )}
      </div>
    </div>
  );
}

数组遍历传递Props的最佳实践 #

• 明确Props类型：所有接收自定义props的组件都要定义对应的TypeScript接口/类型，编译阶段即可发现类型错误，提升代码可维护性。
• 使用唯一key：遍历生成组件时必须指定key，优先用数据的唯一标识（如_id），避免用数组索引（除非数据稳定无增删），React依赖key优化列表渲染性能。
• 处理空值与异常：对异步获取的data增加空值判断（如data?.map或data && data.map），同时处理error状态，提升用户体验。
• 解构Props提升可读性：在子组件内部直接解构需要的props（如{ item }），避免重复写props.item，让代码更简洁。

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