React JS中如何简化结构冗长的useState状态定义，解决空对象初始化报错问题

直接传空对象报错的原因 #

你给useState指定的泛型是完整的OrderSummary类型，该类型要求所有字段必须存在，空对象{}缺少所有必填字段，既不符合TS类型校验规则，运行时访问orderSummary.Id这类嵌套字段时也会因为读取undefined的属性抛出错误。

具体优化方案 #

方案1：抽离公共初始常量（最推荐，适合需要完整初始结构的场景） #

把重复的初始值抽成可复用的常量，统一维护，所有用到的地方直接引入即可，大幅减少重复代码：

1. 在类型定义的同文件（比如@/services/order/data.ts）中定义默认值：

import type { OrderSummary } from "./你的类型定义路径";

export const DEFAULT_ORDER_SUMMARY: OrderSummary = {
    Id: 0,
    TableId: 0,
    TableName: '',
    MerchantId: 0,
    StoreId: 0,
    StoreName: '',
    BrandName: '',
    IsUnifyQR: false,
    Discount: 0,
    ServiceCharge: 0,
    GST: 0,
    RoundingAdjustment: 0,
    TotalAmount: 0,
    SubTotalAmount: 0,
    ServiceChargeAmount: 0,
    GSTAmount: 0,
    CreatedAt: '',
    Items: [
        {
            MerchantId: 0,
            StoreId: 0,
            StoreName: '',
            ItemId: 0,
            ProductId: 0,
            ProductName: '',
            TotalAmount: 0,
            Quantity: 0,
            Note: '',
            Choices: [
                {
                    OptionSelectedName: '',
                    ProductOptionId: 0,
                    OptionSelected: null,
                    MultiOptionsSelected: null,
                    OneChoiceWithValueSelected: {
                        OptionSelected: 0,
                        Quantity: 0,
                        Price: 0,
                    },
                    MultioptionWithValueSelected: [],
                },
            ],
        },
    ],
    Categories: [''],
};

2. 组件中使用时直接引入常量初始化：

import { OrderSummary, DEFAULT_ORDER_SUMMARY } from "@/services/order/data";

// 一行完成初始化，代码极简
const [orderSummary, setOrderSummary] = useState<OrderSummary>(DEFAULT_ORDER_SUMMARY);

如果初始值结构复杂，还可以用函数式初始化避免重复计算：

const [orderSummary, setOrderSummary] = useState<OrderSummary>(() => DEFAULT_ORDER_SUMMARY);

方案2：允许状态为空/部分字段（适合初始不需要完整结构的场景） #

如果你的场景下初始不需要填充所有字段，后续会通过接口请求等方式赋值，可以调整泛型兼容空值：

1. 允许状态初始为null：

// 泛型增加null类型
const [orderSummary, setOrderSummary] = useState<OrderSummary | null>(null);

// 访问字段时用可选链避免报错
console.log(orderSummary?.Id);

2. 允许初始为空对象，所有字段可选：
   用TS内置的Partial工具类型把所有字段转为可选：

const [orderSummary, setOrderSummary] = useState<Partial<OrderSummary>>({});

// 访问字段时建议给默认值
const total = orderSummary.TotalAmount ?? 0;

注意事项 #

你代码里导入的类型是OrderSummary，但useState写的泛型是OrderSummaryResponse，需要确认两个类型是否一致，避免类型不匹配导致的报错。

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