React 模块解析失败：非 null 断言运算符上的意外令牌

问：

我正在尝试在我的 react 页面中添加注释组件的正文，并且我正在使用非 null 断言运算符来执行此操作（第 23 行）

import React, { useState, useEffect } from 'react'
import { useParams } from 'react-router-dom';


const NotePage = () => {
  
    const { noteId } = useParams();

    let [note, setNote] = useState()

    useEffect(() => {
        getNote()
    }, [noteId])

    let getNote = async () => {
        let response = await fetch(`/api/notes/${noteId}`)
        let data = await response.json()
        setNote(data)
    }

    return (
    <div>
      <p>{note?.body}</p>
    </div>
  )
}

export default NotePage

但是我一直收到错误：

./src/pages/NotePage.js 57:10
Module parse failed: Unexpected token (57:10)
You may need an appropriate loader to handle this file type.
|       columnNumber: 7
|     }
>   }, note?.body));
| };
| export default NotePage;

我尝试删除非空断言运算符，但随后出现错误：TypeError: Cannot read properties of undefined (reading 'body')