React项目使用非空断言操作符遇模块解析失败及类型错误求助

问题根源 #

你遇到的Module parse failed: Unexpected token错误，是因为当前项目的打包工具（Webpack+Babel）未配置支持ES2020引入的**可选链操作符（?.）**语法。而移掉?.后出现的TypeError: Cannot read properties of undefined (reading 'body')，则是因为组件初始化时note的状态为undefined，直接访问note.body会触发报错。

解决方案 #

方案1：配置Babel支持可选链操作符 #

如果想保留?.语法，需要让Babel能解析它：

• 安装Babel插件：

npm install --save-dev @babel/plugin-proposal-optional-chaining

• 在Babel配置文件（如.babelrc或babel.config.json）中添加该插件：

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

注：如果使用Create React App创建的项目，默认已支持可选链，无需手动配置；若为自定义Webpack项目，需确保上述配置完成。

方案2：不使用可选链的替代写法 #

如果不想修改打包配置，可以通过以下方式避免报错：

• 给useState设置初始空对象，避免note为undefined：

let [note, setNote] = useState({})

• 渲染时使用短路求值或条件渲染：

// 方式1：短路求值，note未加载时显示空字符串
<p>{note.body || ''}</p>

// 方式2：条件渲染，note存在时才渲染内容
{note.body && <p>{note.body}</p>}

额外优化 #

可以在getNote函数中添加异常处理，避免请求失败时note一直处于undefined状态：

let getNote = async () => {
    try {
        let response = await fetch(`/api/notes/${noteId}`)
        let data = await response.json()
        setNote(data)
    } catch (err) {
        console.error('获取笔记失败:', err)
        setNote({ body: '加载失败，请重试' })
    }
}

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