TypeScript中如何给React组件传递已知结构未知长度的数组Props？

数据老陈

2026-5-14

嘿，作为TypeScript新手碰到这种类型定义的问题太正常了，我完全懂你的困惑！你自己摸索出来的方案其实已经很到位了，咱们把这个思路理得更清楚一点～

你的需求是给React折叠面板组件传一个items属性，这个属性是结构固定的数组：每个子元素都是一个包含「标题字符串」和「任意参数/返回值的函数」的元组。在TypeScript里要实现这个，核心就是用元组来约束子数组的固定结构，再配合灵活的函数类型来兼容任意函数。

你提到的方案完全可行，咱们拆解一下为什么这么写：

首先定义Props接口时，把items指定为Array<[string, (...args: any) => any]>：这里的[string, (...args: any) => any]是一个元组类型，它明确了每个子数组必须有且只有两个元素，第一个是字符串，第二个是函数。这就避免了普通数组类型带来的不确定性（比如子数组长度不固定、元素类型混乱）。
函数类型(...args: any) => any刚好满足你“支持任意参数、任意返回值”的需求：...args: any表示函数可以接收任意数量、任意类型的参数；返回值any则兼容任何类型的返回结果，完美适配可复用组件的灵活性要求。

如果想要比any更严谨一点（避免any带来的类型“逃逸”问题），也可以把函数类型改成(...args: unknown[]) => unknown——unknown是TypeScript里更安全的“未知类型”，使用时需要显式的类型断言，但同样能兼容所有函数类型，看你更偏向灵活性还是类型安全性。

给你贴一个完整的组件实现示例，方便你参考：

import React from 'react';

interface Props {
  title: string;
  // 用元组数组定义items类型
  items: Array<[string, (...args: any) => any]>;
}

const CollapsePanel: React.FC<Props> = ({ title, items }) => {
  return (
    <div className="collapse-panel">
      <h2>{title}</h2>
      <div className="panel-items">
        {items.map(([itemTitle, handleClick], index) => (
          <button 
            key={index}
            // 这里可以根据需要传递任意参数给handleClick
            onClick={() => handleClick("自定义参数", 123)}
          >
            {itemTitle}
          </button>
        ))}
      </div>
    </div>
  );
};

// 组件使用示例，不管函数是什么样的都能正常传入
const App = () => {
  return (
    <CollapsePanel
      title="通用折叠面板"
      items={[
        ["弹出提示", () => alert("你好呀！")],
        ["计算乘积", (a: number, b: number) => a * b],
        ["返回用户信息", () => ({ id: 1, name: "小明" })]
      ]}
    />
  );
};

这样写之后，TypeScript就能正确识别items的结构，既保证了类型安全，又保留了可复用组件需要的灵活性～

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