React Router中useOutletContext报错：Dispatch类型缺少迭代器方法

你在子组件中错误使用数组解构语法接收Outlet传递的context，但父组件实际传递的是单个setModalActive函数（并非数组/可迭代对象）。数组解构要求右侧值必须具备迭代器方法（[Symbol.iterator]()），而Dispatch<SetStateAction<boolean>>类型的函数不满足该要求，因此触发TypeScript错误。

有两种可行修复方案，可根据需求选择：

方案1：直接接收单个值（当前场景推荐） #

子组件去掉数组解构，直接赋值接收context：

// AdminRegister.tsx
import { Button } from 'antd';
import { Dispatch, SetStateAction } from 'react';
import { useOutletContext } from 'react-router-dom';
import styles from './admin-register.module.scss';

export function AdminRegister() {
  // 移除数组解构，直接赋值
  const setModalActive = useOutletContext<Dispatch<SetStateAction<boolean>>>();
  return (
    <div className={styles['container']}>
      <h1>Welcome to AdminRegister!</h1>
      <Button onClick={() => setModalActive(true)}>Register</Button>
    </div>
  );
}

export default AdminRegister;

方案2：包装成数组传递（适合多值传递场景） #

如果后续需要通过Outlet传递多个上下文值，可在父组件将context包装成数组，子组件再用数组解构接收：

父组件修改（LayoutPublic.tsx）： #

// ... 其他代码不变
<Outlet context={[setModalActive]} /> // 将单个函数包装为数组

子组件修改（AdminRegister.tsx）： #

// ... 其他代码不变
// 类型改为对应数组结构
const [setModalActive] = useOutletContext<[Dispatch<SetStateAction<boolean>>]>();

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