如果imageLinks是不确定的话，就不是一个对象，所以你将不能够使用点语法，因此错误试图让smallThumbnail财产。

试试这个：

<div
  className="book-cover"
  style={{
    width: 128,
    height: 193,
    backgroundImage: `url(${(item.imageLinks && item.imageLinks.smallThumbnail) || "../public/book.png"})`
  }}
></div>

...所以您首先要检查imageLinks。

由于您imageLinks本身不是财产，因此您可以这样处理：

let imageUrl = item.imageLinks ? item.imageLinks.smallThumbnail : '../public/book.png';

return(
  <ol className="books-grid">
    {book.map( (item)  => (
        <li key={item.id}>
          <div className="book">
            {item.shelf && (
                <div className="book-top">
                  <div 
                    className="book-cover" 
                    style={{ width: 128, height: 193, backgroundImage: `url(${imageUrl})` }}></div>

在您的代码中，您需要处理item.imageLinks未定义的情况，所以问题出在这一行：

`url({${item.imageLinks.smallThumbnail} || ../public/book.png })`

在这里，如果imageLinks未定义，该行将出错。

相反，您可以像这样使用三元运算符：

`url({${(item && item.imageLinks && item.imageLinks.smallThumbnail) ? item.imageLinks.smallThumbnail : `../public/book.png`} })` 

虽然这很难读。

我会考虑重构它，以便在渲染方法的顶部有一个对象数组，您可以在其中存储每个项目的图像和图像 url，然后在渲染方法中对其进行迭代。

This is now solved, Below is the code that worked.

return(
        <ol className="books-grid">
          {book.map( (item)  => (
              <li key={item.id}>
                <div className="book">
                  {item.shelf && (
                      <div className="book-top">
                        <div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${(item.imageLinks && item.imageLinks.smallThumbnail) || "book.jpg"})` }}></div>

我在这里学到的一个技巧是使用 && 来检查未定义，否则 JS 会抱怨错误。感谢大家