Next.js调用Strapi数据报错：无法读取url属性求助

问题场景 #

使用Next.js作为前端、Strapi作为后端开发项目，在Insomnia中测试接口http://localhost:1337/api/products?populate=*可正常返回数据，但首页渲染时触发错误：TypeError: Cannot read properties of undefined (reading 'url')。其他产品属性可正常展示，仅thumbnail图片无法加载。

相关代码 #

pages/index.js

import HeroBanner from "@/components/HeroBanner";
import ProductCard from "@/components/ProductCard";
import Wrapper from "@/components/Wrapper";
import { fetchDataFromApi } from "@/utils/api";

export default function Home({ products }) {
  return (
    <>
      <main>
        <HeroBanner />
        <Wrapper>
          {/* products grid start */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 md:gap-3 lg:gap-4 my-14  md:px-0">
            {products?.data?.map((product) => (
              <ProductCard key={product?.id} data={product} />
            ))}
          </div>
          {/* products grid end */}
        </Wrapper>
      </main>
    </>
  );
}

export async function getStaticProps() {
  const products = await fetchDataFromApi("/api/products?populate=*");

  return {
    props: { products },
  };
}

components/ProductCard.js

import React from "react";
import Link from "next/link";
import Image from "next/image";


const ProductCard = ({ data: { attributes: p, id } }) => {

  return (
    <div className="group rounded-md shadow-xl">
      <Link href={`/product/${p.slug}`}>
        <div className="transform overflow-hidden cursor-pointer">
          <Image
            className="w-full h-full object-cover group-hover:scale-110 duration-500"      
            width={640}
            height={640}
            src={p.thumbnail.data.attributes.url}
            alt={p.name}
          />
        </div>
        <div className="p-4 text-black/[0.9]">
          <h2 className="text-sm md:text-md lg:text-lg font-medium">
            {p.name}
          </h2>
         
        </div>
      </Link>
    </div>
  );
};

export default ProductCard;

问题分析 #

报错的核心原因是存在至少一个产品的thumbnail字段未关联图片，导致Strapi返回的数据中该产品的p.thumbnail.data为undefined，直接访问attributes.url就会触发空值读取错误。即使大部分产品有正常的缩略图，只要有一个产品的图片缺失，就会引发这个问题。

解决方案 #

1. 前端添加空值防护（最快修复） #

在ProductCard.js中给嵌套属性添加可选链操作符，同时设置默认图片避免空白：

<Image
  className="w-full h-full object-cover group-hover:scale-110 duration-500"      
  width={640}
  height={640}
  src={p.thumbnail?.data?.attributes?.url || '/path/to/your/default-image.png'}
  alt={p.name}
/>

• ?.会在属性不存在时返回undefined，不会继续向下访问导致报错
• ||设置默认图片路径，确保即使无图也能显示占位图

2. 后端补全产品数据（从根源解决） #

登录Strapi后台，检查所有产品的thumbnail字段，为没有关联图片的产品补上缩略图，确保所有产品都有有效的图片数据。

3. API请求过滤无图产品（可选） #

如果业务上允许不展示无图产品，可以在API请求中过滤掉thumbnail为空的产品，修改pages/index.js中的getStaticProps：

export async function getStaticProps() {
  // 过滤掉thumbnail为空的产品
  const products = await fetchDataFromApi("/api/products?populate=*&filters[thumbnail][$notNull]=true");

  return {
    props: { products },
  };
}

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