使用Next.js与Strapi实现轮播图：输出对象数组报错求助

问题说明 #

创建轮播组件时，渲染对象数组出现错误，无法正常调用map方法；后台管理面板已配置好轮播数据。

现有代码 #

interface Picture {
    data: {
        id: string;
        attributes: {
            url: string;
            name: string;
            alternativeText: string;
        };
    };
}

interface Slide {
    data: {
        id: string;
        title: string;
        picture: Picture;
    }
}

interface SliderProps {
    data: {
        slides: Slide[];
    };
}

export default function Slider({ data }: SliderProps) {
    return (<div>
            {data.slides.map((slide: Slide, index: number) => (
                <span key={index}>
                    {slide.data.title}
                </span>
            ))}
        </div>);
}

错误原因 #

接口定义完全不符合后台（推测为Strapi）实际返回的数据结构：

• 后台返回的集合数据格式为data: Array<{id: string, attributes: {...}}>，而非每个Slide嵌套一层data字段
• 图片字段picture的嵌套层级也与实际返回结构不匹配

修复方案 #

1. 修正TypeScript接口 #

调整接口匹配真实数据结构：

// 图片媒体字段结构
interface Picture {
    id: string;
    attributes: {
        url: string;
        name: string;
        alternativeText: string;
    };
}

// 单个轮播项结构
interface Slide {
    id: string;
    attributes: {
        title: string;
        picture: {
            data: Picture;
        };
    };
}

// 组件接收的props结构
interface SliderProps {
    data: {
        slides: Slide[];
    };
}

2. 调整渲染逻辑 #

根据修正后的接口修改取值路径，同时增加空值判断避免崩溃：

export default function Slider({ data }: SliderProps) {
    if (!data?.slides) return <div>暂无轮播数据</div>;

    return (<div>
            {data.slides.map((slide: Slide) => (
                <span key={slide.id}>
                    {slide.attributes.title}
                </span>
            ))}
        </div>);
}

额外优化 #

• 用数据自身的id作为key，比数组索引更稳定
• 若需渲染图片，可通过slide.attributes.picture.data.attributes.url获取路径，记得拼接后台服务域名（如${process.env.NEXT_PUBLIC_STRAPI_URL}${url}）

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