使用useFetch获取Map<string, number>失败，返回Object问题求助

为什么返回的是Object而非Map？ #

• JSON规范里不存在Map数据类型，你的API返回的是标准JSON对象，JS会自动将JSON解析为普通键值对对象，这是运行时的实际数据结构。
• TypeScript的泛型<Map<string, number>>仅作为类型提示，不会修改实际数据——它只是告诉TS编译器你期望变量是Map类型，但实际拿到的仍是解析后的普通对象，所以调用get()方法会触发“不是函数”的错误。

解决方案 #

方法1：手动转换数据 #

先获取原始对象，再用Object.entries()将其转为Map所需的键值对数组，最后生成Map：

<script setup lang="ts">
// 标注原始数据为Record<string, number>，更贴合实际类型
const { data: rawObj } = await useFetch<Record<string, number>>('http://localhost:8080/map-test');

// 转换为Map
const myMap = ref<Map<string, number> | null>(null);
if (rawObj.value) {
  myMap.value = new Map(Object.entries(rawObj.value));
}

// 现在可正常调用Map方法
console.log(myMap.value?.get("test")); // 输出 1
</script>

方法2：用useFetch的transform钩子直接转换 #

利用useFetch的transform选项，在数据解析完成后立刻转为Map，返回的data直接就是Map类型：

<script setup lang="ts">
const { data: myMap } = await useFetch<Map<string, number>>('http://localhost:8080/map-test', {
  transform: (responseData) => new Map(Object.entries(responseData))
});

// 直接使用Map方法
console.log(myMap.value?.get("test")); // 输出 1
</script>

补充说明 #

Object.entries()会把普通对象的键值对转换为[key, value]格式的数组，而Map的构造函数恰好接受这种数组作为参数，这是实现转换的核心逻辑。

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