React组件解构data.detailInfo.id报错：Uncaught TypeError如何解决？

错误信息：Uncaught TypeError: Cannot destructure property 'id' of 'data.detailInfo' as it is undefined

原组件代码：

import React, { Component } from 'react';
import { InfoConsumer } from '../context';

class Details extends Component {
    render() {
        return (
            <InfoConsumer>
                {data => {
                    const {
                        id,
                        headerTitle,
                        headerSubTitle,
                        headerText,
                        img,
                        title,
                        maps,
                        description
                    } = data.detailInfo;
                    return (
                        <React.Fragment>
                            <div className="conteiner-fluid align-items-center">
                                <h1 className='display-1 font-weight-bold'>{headerTitle}</h1>
                                <h4 className='display-5'>{headerSubTitle}</h4>
                                <p>{headerText}</p>
                            </div>
                        </React.Fragment>
                    );
                }}
            </InfoConsumer>
        );
    }
}

export default Details;

根据JavaScript检查undefined的标准方式（使用严格相等运算符===与原始值undefined比较），可以通过以下两种方式避免报错：

方案一：提前判断，拦截未准备好的状态 #

在解构前先检查data.detailInfo是否存在，若不存在则返回加载提示或空内容，避免后续解构报错：

import React, { Component } from 'react';
import { InfoConsumer } from '../context';

class Details extends Component {
    render() {
        return (
            <InfoConsumer>
                {data => {
                    // 标准方式检查data.detailInfo是否为undefined
                    if (data.detailInfo === undefined) {
                        return <div>加载中...</div>; // 可替换为自定义加载组件或null
                    }
                    
                    const {
                        id,
                        headerTitle,
                        headerSubTitle,
                        headerText,
                        img,
                        title,
                        maps,
                        description
                    } = data.detailInfo;
                    return (
                        <React.Fragment>
                            <div className="conteiner-fluid align-items-center">
                                <h1 className='display-1 font-weight-bold'>{headerTitle}</h1>
                                <h4 className='display-5'>{headerSubTitle}</h4>
                                <p>{headerText}</p>
                            </div>
                        </React.Fragment>
                    );
                }}
            </InfoConsumer>
        );
    }
}

export default Details;

方案二：使用空对象默认值安全解构 #

通过空值合并运算符??给data.detailInfo设置默认空对象，即使它是undefined，解构操作也能安全执行（此时所有解构出的属性会是undefined，但不会抛出错误）：

import React, { Component } from 'react';
import { InfoConsumer } from '../context';

class Details extends Component {
    render() {
        return (
            <InfoConsumer>
                {data => {
                    // 给data.detailInfo设置默认空对象，避免解构报错
                    const {
                        id,
                        headerTitle,
                        headerSubTitle,
                        headerText,
                        img,
                        title,
                        maps,
                        description
                    } = data.detailInfo ?? {};
                    return (
                        <React.Fragment>
                            <div className="conteiner-fluid align-items-center">
                                <h1 className='display-1 font-weight-bold'>{headerTitle}</h1>
                                <h4 className='display-5'>{headerSubTitle}</h4>
                                <p>{headerText}</p>
                            </div>
                        </React.Fragment>
                    );
                }}
            </InfoConsumer>
        );
    }
}

export default Details;

如果data本身也可能为undefined，可以结合可选链运算符?.进一步增强安全性：

const { ... } = data?.detailInfo ?? {};

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