React+TypeScript调用API获取对象数组却返回Promise问题求助

所有标记async的函数返回值都会自动包装为Promise类型，你直接调用fetchLikes()拿到的是Promise实例而非接口返回的实际数据，必须通过await或者.then()方法才能拿到解析后的对象数组。

1. 普通TS环境调用 #

两种常用写法：

// 写法1：async立即执行函数包裹await
(async () => {
  const likesData = await fetchLikes()
  console.log('实际返回数据：', likesData)
})()

// 写法2：.then链式调用
fetchLikes()
  .then(likesData => console.log('实际返回数据：', likesData))
  .catch(err => console.error('接口请求失败：', err))

2. React函数组件内调用 #

在React中通常配合useState和useEffect存储和获取异步数据，完整示例如下：

import { useState, useEffect } from 'react'
import axios from 'axios'

// 类型定义
interface IFetchLikes {
  item_id: string;
  likes: number;
}

// 接口请求方法
const fetchLikes = async (): Promise<IFetchLikes[]> => {
  const response = await axios.get<IFetchLikes[]>('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/PmGqiCAY4CG3PZPHNcEG/likes');
  return response.data;
};

// 业务组件
const LikeList = () => {
  // 状态标注对应类型
  const [likesList, setLikesList] = useState<IFetchLikes[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    // useEffect回调不能直接标记async，需在内部定义异步函数调用
    const getLikes = async () => {
      try {
        const data = await fetchLikes()
        setLikesList(data)
      } catch (err) {
        setError('获取点赞数据失败')
        console.error(err)
      } finally {
        setLoading(false)
      }
    }
    getLikes()
  }, [])

  if (loading) return <div>加载中</div>
  if (error) return <div>{error}</div>

  return (
    <ul>
      {likesList.map(item => (
        <li key={item.item_id}>
          条目ID：{item.item_id} | 点赞数：{item.likes}
        </li>
      ))}
    </ul>
  )
}

• 优先阅读React官方文档的TypeScript专项章节，覆盖组件Props、Hooks等常用场景的类型标注规范
• 阅读TypeScript官方手册的React适配部分，掌握泛型组件、复杂状态类型定义等进阶用法
• 参考开源React+TS项目的源码，学习工业级的类型设计和最佳实践
• 多做小型实战项目练习，从基础组件到复杂状态管理逐步积累类型标注经验

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