TypeError：无法读取 Next.js 中 null 的属性（读取“默认”）

Question

早些时候，我的 Next.js 应用程序TypeError: Cannot read properties of null (reading 'default')在我从 CMS 渲染一些文章的代码中没有进行任何更改的情况下就开始抛出异常。

这是完整的日志：

这是我的代码：

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 src={article.image} alt="" height={900} width={900} layout="responsive" />
          </div>
        </div>
      ))}
    </div>
  );
}

Answer 1

经过一番研究，我发现了这个 GitHub讨论，然后意识到一位同事从我们的 CMS 中删除了我们一篇文章的图像。如果您遇到过这种情况，解决方案是Image在检查后渲染标签，如下所示：

{ article.image ? <Image src={article.image} alt="" height={900} width={900} layout="responsive" /> : null }