React/NextJS报Cannot read properties of undefined (reading 'map')

编译阶段无报错是因为构建工具默认不会校验接口返回值的类型，运行时TypeError: Cannot read properties of undefined (reading 'map')的触发逻辑如下：

• 虽然relatedPosts初始值设为空数组，但useEffect中接口请求逻辑没有做异常和返回值校验：当getSimilarPosts或getRecentPosts请求失败、返回结构不符合预期时，拿到的result为undefined，直接执行setRelatedPosts(result)会把state更新为undefined，后续渲染调用.map()时就会触发类型错误。
• 代码中还存在三个隐藏运行时问题：
  • Link标签上写了key={index}，但map回调函数中从未定义index变量，会触发未定义错误
  • 头部引入了next/image组件但实际使用原生<img>标签，属于无效冗余引入
  • 直接访问post.featuredImage.url没有做空值判断，当文章没有封面图时会再次触发undefined读取错误
  • useEffect依赖数组缺失categories参数，触发闭包陷阱时会导致相似文章查询参数异常

做三层防护即可彻底解决问题：

• 接口层：加异常捕获，对返回值做类型校验，保证更新到state的永远是数组类型
• 渲染层：调用map前先判断变量是否为数组，增加兜底渲染逻辑
• 细节修复：删掉无效的key属性、冗余引入，补全useEffect依赖，给对象属性访问加可选链兜底

修复后的完整组件代码：

import React, { useState, useEffect } from 'react';
import moment from 'moment';
import Link from 'next/link';

import { getSimilarPosts, getRecentPosts } from '../services';

const PostWidget = ({ categories, slug }) => {
  const [relatedPosts, setRelatedPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        let res;
        if (slug) {
          res = await getSimilarPosts(categories, slug);
        } else {
          res = await getRecentPosts();
        }
        // 校验返回值为数组才赋值，否则兜底为空数组
        setRelatedPosts(Array.isArray(res) ? res : []);
      } catch (error) {
        console.error('获取文章列表失败:', error);
        setRelatedPosts([]);
      }
    };
    fetchPosts();
  }, [slug, categories]);

  return (
    <div className="bg-white shadow-lg rounded-lg p-8 pb-12 mb-8">
      <h3 className="text-xl mb-8 font-semibold border-b pb-4">{slug ? 'Related Posts' : 'Recent Posts'}</h3>
      {/* 双重校验保证map调用方为数组 */}
      {Array.isArray(relatedPosts) && relatedPosts.length > 0 ? (
        relatedPosts.map((post) => (
          <div key={post.slug || post.title} className="flex items-center w-full mb-4">
            <div className="w-16 flex-none">
              <img
                alt={post.title}
                height="60px"
                width="60px"
                unoptimized
                className="align-middle rounded-full"
                // 可选链兜底封面图不存在的场景
                src={post.featuredImage?.url || '/default-post-cover.png'}
              />
            </div>
            <div className="flex-grow ml-4">
              <p className="text-gray-500 font-xs">{moment(post.createdAt).format('MMM DD, YYYY')}</p>
              <Link href={`/post/${post.slug}`} className="text-md">{post.title}</Link>
            </div>
          </div>
        ))
      ) : (
        <p className="text-gray-500 text-center py-2">暂无相关文章</p>
      )}
    </div>
  );
};

export default PostWidget;

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