React中useEffect获数组后用map遇TS报错：No overload matches this call

核心原因 #

你的状态变量被TypeScript推断为非数组类型（比如undefined），虽然运行时已经获取到数组并正常渲染，但编译阶段TS会认为调用map的对象可能不是数组，因此抛出类型错误。

具体解决方案 #

1. 给状态指定明确类型并设置数组初始值

如果状态是存储字符串数组，初始化时直接指定类型和空数组初始值：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  // 明确指定状态为字符串数组，初始值设为空数组
  const [categories, setCategories] = useState<string[]>([]);

  useEffect(() => {
    // 模拟获取数据，实际可能是接口请求
    const mockData = ['a', 'b', 'c'];
    setCategories(mockData);
  }, []);

  return (
    <div>
      {/* 此时map调用的类型完全匹配，不会报错 */}
      {categories.map(category => (
        <div key={category}>{category}</div>
      ))}
    </div>
  );
};

2. 使用可选链或空值合并处理可能的空状态

如果状态初始值必须为undefined或null，可以在调用map前做空值处理：

// 可选链写法：仅当categories存在时才调用map
{categories?.map(category => (
  <div key={category}>{category}</div>
))}

// 空值合并写法：如果categories为空则用空数组兜底
{(categories || []).map(category => (
  <div key={category}>{category}</div>
))}

3. 确保数据赋值时的类型正确性

如果是从接口异步获取数据，需确保返回数据的类型符合预期，必要时使用类型断言：

useEffect(() => {
  const fetchCategories = async () => {
    const response = await fetch('/your-api-url');
    const data = await response.json();
    // 断言数据为字符串数组，避免TS推断错误
    setCategories(data as string[]);
  };
  fetchCategories();
}, []);

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