解决TypeScript报错：Provider<T>需具备Symbol.iterator迭代器方法

我正在开发一个组件，用来把所有Provider整合成数组以避免嵌套Provider，但遇到了TypeScript错误：

Type 'Provider' must have a 'Symbol.iterator' method that returns an iterator.ts(2488)

错误出现在代码行const [ProviderComponent, props] = curr;处。

我的代码 #

import type { Provider, ReactNode } from 'react';

interface ComposeProviderProps<TValue> {
   providers: Provider<TValue>[];
   children: ReactNode;
}
export default function ComposeProvider<T>({ providers, children }: ComposeProviderProps<T>) {
   return (
      <>
         {providers.reduceRight((acc, curr) => {
            const [ProviderComponent, props] = curr; // <=== TS Error here

            return <ProviderComponent {...props}>{acc}</ProviderComponent>;
         }, children)}
      </>
   );
}

使用示例 #

<ComposeProvider providers={[<Provider1 />, <Provider2 />, <Provider3 />]}>
 ...children
</ComposeProvider>

核心问题是类型定义和实际数据结构不匹配：你定义的providers是Provider<TValue>[]类型，但代码里试图把每个项解构为[组件, props]元组，同时使用示例传入的是已经渲染的JSX元素，这三者完全不兼容。

修复后的代码 #

import type { ComponentType, ReactNode } from 'react';

// 定义每个provider项的类型：[组件构造函数, 组件props]
type ProviderItem<Props> = [ComponentType<Props>, Props];

interface ComposeProviderProps {
  providers: ProviderItem<any>[];
  children: ReactNode;
}

export default function ComposeProvider({ providers, children }: ComposeProviderProps) {
  return (
    <>
      {providers.reduceRight((acc, [ProviderComponent, props]) => {
        return <ProviderComponent {...props}>{acc}</ProviderComponent>;
      }, children)}
    </>
  );
}

正确使用方式 #

<ComposeProvider 
  providers={[
    [Provider1, { value: 'foo' }],
    [Provider2, { theme: 'dark' }],
    [Provider3, { data: [] }]
  ]}
>
  ...children
</ComposeProvider>

可选：类型严谨性优化 #

如果想避免any，让TypeScript自动校验props类型，可以用可变参数泛型：

import type { ComponentType, ReactNode } from 'react';

type ProviderItem<Props> = [ComponentType<Props>, Props];

export default function ComposeProvider<Providers extends ProviderItem<any>[]>({
  providers,
  children,
}: {
  providers: [...Providers];
  children: ReactNode;
}) {
  return (
    <>
      {providers.reduceRight((acc, [ProviderComponent, props]) => {
        return <ProviderComponent {...props}>{acc}</ProviderComponent>;
      }, children)}
    </>
  );
}

这样使用时，TypeScript会自动检查每个provider的props是否符合对应组件的要求，类型安全性更高。

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