Typescript+React项目调用数组forEach时报Object is possibly 'undefined'错误

错误原因 #

• 状态类型定义错误：你当前给useState指定的泛型是单个Posts对象，而你的接口返回的data.posts是Posts对象组成的数组；同时你没有给状态设置初始值，posts的初始值为undefined，调用数组方法前没有做空值判断，所以触发TS的空值校验报错。
• JSX中使用forEach不符合语法规则：forEach没有返回值，即使执行了也不会在页面渲染任何内容，要遍历渲染列表需要使用map方法。

修复方案 #

首先调整类型定义和状态初始化，再修改遍历逻辑：

// 接口名建议调整为Post，对应单篇文章的类型
interface Post {
  _id: string
  title: string
  date: string
  text: string
  author_name: string
  published: boolean
  __v: number
}

const TextField = () => {
  // 泛型指定为Post数组，初始值设为空数组，避免undefined问题
  const [posts, setPosts] = useState<Post[]>([])

  const fetchData = async () => {
    const result = await fetch("https://ed-blog-api.herokuapp.com/api/posts")
    const data = await result.json()
    setPosts(data.posts)
  }

  return (
    <div>
      <button onClick={fetchData}>Click</button>
      {/* 已经初始化空数组不需要做空判断，如果不想初始化空数组可以用可选链：posts?.map */}
      {posts.map((post) => {
        console.log(post)
        // 如果要渲染内容需要返回对应的JSX元素，比如：
        // return <div key={post._id}>{post.title}</div>
      })}
    </div>
  )
}

如果不想给状态设置初始空数组，也可以用可选链运算符处理空值：

// 状态定义保持可选
const [posts, setPosts] = useState<Post[]>()
// 调用方法前加可选链
{posts?.map((post) => console.log(post))}

内容的提问来源于stack exchange，提问作者Luffy D. Monkey