Next.js应用报错TypeError: Cannot read properties of null (reading 'default')求助

错误原因 #

这个错误的核心是传入next/image组件的src值为null。虽然你没修改代码，但CMS返回的文章数据中，某篇或多篇文章的image字段变成了空值（null），导致Image组件内部处理时抛出异常。

修复方案 #

1. 排查CMS数据 #

先登录CMS后台，检查所有文章的图片字段，确认是否存在未设置图片或图片链接失效的条目，及时补全或修正这些数据。

2. 代码层面添加防护逻辑 #

在渲染Image组件前，先判断article.image是否有效，避免传入空值：

修改后的代码示例：

import Image from "next/image";

export default function Articles({ articles }) {
  return (
    <div className="articles">
      {articles.map((article) => (
        <div className="article" key={article.id}>
          <div className="text">
            <h2>{article.title}</h2>
            <p>{article.content}</p>
          </div>
          <div className="image">
            {/* 仅当image字段存在时渲染图片组件 */}
            {article.image && (
              <Image 
                src={article.image} 
                alt={article.title || "文章配图"} 
                height={900} 
                width={900} 
                layout="responsive" 
              />
            )}
            {/* 可选：无图片时显示占位内容 */}
            {!article.image && <div className="image-placeholder">暂无图片</div>}
          </div>
        </div>
      ))}
    </div>
  );
}

额外优化 #

• 给alt属性设置有意义的文本（比如文章标题），提升页面可访问性。
• 如果需要统一占位图，可将判断逻辑改为：

  <Image 
    src={article.image || "/path/to/placeholder-image.jpg"} 
    alt={article.title || "文章配图"} 
    height={900} 
    width={900} 
    layout="responsive" 
  />
  

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