Cannot read properties of undefined (reading '$message')

这个错误通常是由于尝试访问未定义的对象属性而引起的。在这种情况下，您正在尝试读取一个名为“message”的属性，但该属性未定义。这可能是由于未正确初始化对象或未正确传递参数引起的。要解决此问题，您可以检查代码中的对象是否已正确初始化，并确保传递给函数的参数正确。您还可以使用JavaScript的可选链操作符（?.）来避免访问未定义的属性时出现此错误。例如，您可以使用以下代码来检查对象是否定义了“message”属性： ``` if (myObject?.message) { // do something with myObject.message } ```

### 解决方案 在 JavaScript 或 TypeScript 中，`TypeError: Cannot read properties of undefined` 错误通常发生在尝试访问未定义对象的属性时。例如，在使用 Axios 和 Webpack 的场景中，如果代码试图访问一个不存在的对象（如 `$message`），就会引发该错误。 为了避免此类错误，可以采取以下方法： 1. **检查对象是否存在**：在访问对象属性之前，确保对象已被正确定义并赋值。 ```javascript if (response && response.data) { console.log(response.data.$message); } else { console.error('Response or data is undefined'); } ``` 2. **使用可选链操作符（Optional Chaining）**：从 ECMAScript 2020 开始，JavaScript 提供了可选链操作符 (`?.`)。这允许在安全地访问嵌套属性的同时避免抛出错误[^5]。 ```javascript console.log(response?.data?.$message); // 如果 response 或 data 为 undefined，则不会抛出错误 ``` 3. **类型保护（Type Guard）**：在 TypeScript 中，可以通过类型保护来验证变量是否为预期类型[^6]。 ```typescript function getMessage(response: any): string | undefined { if (response && typeof response === 'object' && 'data' in response) { return response.data.$message; } return undefined; } ``` 4. **默认值处理**：通过提供默认值，可以防止因对象未定义而导致的错误。 ```javascript const message = (response && response.data && response.data.$message) || 'Default Message'; console.log(message); ``` 5. **Axios 拦截器**：在使用 Axios 时，可以通过拦截器确保响应数据符合预期格式[^7]。 ```javascript axios.interceptors.response.use( (response) => { if (!response.data) { throw new Error('Response data is undefined'); } return response; }, (error) => { console.error('Axios error:', error); return Promise.reject(error); } ); ``` 6. **Webpack 配置优化**：如果问题与 Webpack 配置相关，例如打包过程中丢失了某些依赖或模块，需要检查 Webpack 配置文件，确保所有必要的模块都被正确加载[^8]。 --- ### 示例代码 以下是结合上述方法的一个完整示例： ```typescript async function fetchMessage(): Promise<void> { try { const response = await axios.get('/api/message'); if (response && response.data) { const message = response.data.$message ?? 'No message available'; console.log(message); } else { console.error('Invalid response format'); } } catch (error) { console.error('Error fetching message:', error.message); } } ``` --- ### 注意事项 - 在 TypeScript 中，务必为函数和变量添加明确的类型声明，以减少运行时错误的发生[^2]。 - 使用 PropTypes 或 TypeScript 进行静态类型检查，有助于在开发阶段发现潜在问题[^4]。 ---