React TypeScript中如何定义Props类型？解决‘authors不存在’报错

错误原因 #

你在定义组件类型时，错误地将React.FC的泛型参数用数组[Props]包裹，导致TS将组件props识别为元组类型，而非预期的对象类型，因此解构authors时会提示属性不存在。

修正步骤 #

1. 保留正确的Props类型定义 #

type Props = {
  authors: {
    name: string;
    password: string;
  }[];
};

2. 修正组件的类型注解 #

有两种常见写法：

写法一：使用React.FC（适用于需要隐式children的场景）

import React, { FC } from 'react';

const Login: FC<Props> = ({ authors }) => {
  return (
    // 组件渲染内容
  );
};

写法二：直接指定props参数类型（更直观，避免隐式children）

const Login = ({ authors }: Props) => {
  return (
    // 组件渲染内容
  );
};

关键说明 #

React.FC的泛型参数需要接收对象类型的props定义，而非数组或其他类型。用[Props]会让TS误解props结构，引发类型错误。

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