TypeScript MERN电商项目报错：categories.map is not a function

这个错误的核心是你在非数组类型的值上调用了map方法。结合你的MERN电商项目场景，以下是具体排查和修复步骤：

1. 先确认API返回的categories结构 #

在组件中添加日志，查看categories的实际类型和值：

const { data: categories, isLoading, error } = useGetCategoriesQuery()
console.log('Categories raw data:', categories); // 新增日志

或者打开浏览器DevTools的Network面板，查看useGetCategoriesQuery对应的接口返回内容，确认：

• 返回是否为纯数组格式（比如["手机", "电脑"]）
• 是否被包裹在对象中（比如{ categories: ["手机", "电脑"] }）
• 或者返回了null/undefined/字符串等非数组类型

2. 针对性修复 #

场景A：API返回的是包裹在对象里的数组 #

如果接口返回类似{ categories: ["手机", "电脑"] }的结构，需要提取对应属性：

// 修改解构逻辑
const { data: response = {}, isLoading, error } = useGetCategoriesQuery()
const categories = response.categories || []

// 后续map调用使用处理后的categories
categories.map((category) => (
  // ...你的组件代码
))

场景B：API返回可能为null/undefined #

给categories设置默认空数组，避免undefined.map报错：

// 解构时直接设置默认值
const { data: categories = [], isLoading, error } = useGetCategoriesQuery()

// 移除!断言，因为已经确保categories是数组
categories.map((category) => (
  // ...你的组件代码
))

场景C：后端返回了非数组类型（比如单个字符串/对象） #

如果后端意外返回单个值（比如"手机"而非["手机"]），前端先转换为数组：

const { data: rawCategories, isLoading, error } = useGetCategoriesQuery()
const categories = Array.isArray(rawCategories) ? rawCategories : (rawCategories ? [rawCategories] : [])

同时建议检查后端接口，确保返回标准数组格式，这是更根本的解决方式。

3. 额外优化：增强TypeScript类型安全 #

在productHooks中给useGetCategoriesQuery定义正确的返回类型，提前规避类型错误：

// 示例：在RTK Query的接口定义中指定返回类型为string[]
export const useGetCategoriesQuery = createApi(/* ... */).injectEndpoints({
  endpoints: (builder) => ({
    getCategories: builder.query<string[], void>({
      query: () => '/api/categories',
    }),
  }),
})

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