React TypeScript组件传参错误：函数误传为数组类型

错误根源 #

组件Props中定义的students是数组类型（Array<Student['id']>等价于string[]），但你传入的是异步函数getStudents——函数类型和数组类型完全不兼容，TypeScript检测到类型不匹配，所以提示函数缺少数组特有的pop、push等方法（它期望接收数组，实际收到了函数）。

两种修正方案 #

方案1：组件接收数组，父组件先获取数据再传入

如果组件的职责是展示学生ID数组，那么保持Props的数组定义不变，在父组件中调用异步函数拿到数组后再传递：

// 组件定义
interface Student {
  id: string;
}

interface MyComponentProps {
  students: Array<Student['id']>;
}

const MyComponent = ({ students }: MyComponentProps) => {
  return <div>学生ID列表：{students.join(', ')}</div>;
};

// 父组件中调用函数并传递数组
import { useState, useEffect } from 'react';

const getStudents = async (): Promise<string[]> => {
  // 模拟接口请求获取学生ID
  return await Promise.resolve(['stu_001', 'stu_002']);
};

const ParentComponent = () => {
  const [studentIds, setStudentIds] = useState<string[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const ids = await getStudents();
      setStudentIds(ids);
    };
    fetchData();
  }, []);

  return <MyComponent students={studentIds} />;
};

方案2：修改组件Props，直接接收异步函数

如果组件需要自己触发数据获取，可以把Props的类型改成接收异步函数：

// 修改组件Props定义
interface MyComponentProps {
  getStudents: () => Promise<string[]>;
}

const MyComponent = ({ getStudents }: MyComponentProps) => {
  const [studentIds, setStudentIds] = useState<string[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const ids = await getStudents();
      setStudentIds(ids);
    };
    fetchData();
  }, [getStudents]);

  return <div>学生ID列表：{studentIds.join(', ')}</div>;
};

// 调用时直接传入函数
<MyComponent getStudents={getStudents} />

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