NGXS嵌套patch调用setState时，可空字段触发TypeScript类型错误

当你将子状态模型的字段改为可空（string | null）或可选（?: string）后，NGXS的patch操作符类型推导会因为嵌套层级的类型变化出现不兼容问题，以下是几种可行的解决方法：

1. 显式指定patch的泛型类型 #

给内层和外层的patch操作符明确指定对应的状态模型泛型，帮助TypeScript正确识别类型约束：

function myfunction(ctx: StateContext<MyStateModel>) {
  ctx.setState(
    patch<MyStateModel>({
      subState1: patch<SubStateModel1>({
        someField1: "some value", // 也可以赋值为null
      }),
    })
  );
}

这种方法直接解决类型推导的模糊性，让TypeScript明确知道每个patch操作对应的状态结构。

2. 针对可选子状态的额外处理 #

如果subState1本身也是可选字段（比如subState1?: SubStateModel1），需要先判断子状态是否存在，再执行patch，可结合iif操作符：

import { iif, patch } from '@ngxs/store';

function myfunction(ctx: StateContext<MyStateModel>) {
  ctx.setState(
    patch<MyStateModel>({
      subState1: iif(
        (existing) => !!existing.subState1,
        patch<SubStateModel1>({ someField1: "some value" }),
        // 若子状态不存在，直接初始化新对象
        { someField1: "some value" }
      )
    })
  );
}

3. 使用patchState简化操作 #

如果只是部分更新状态，也可以直接使用ctx.patchState替代setState结合patch的写法，它的类型推导对可空/可选字段更友好：

function myfunction(ctx: StateContext<MyStateModel>) {
  ctx.patchState({
    subState1: {
      ...ctx.getState().subState1,
      someField1: "some value"
    }
  });
}

问题根源 #

NGXS的patch操作符默认基于必填非空的字段结构做类型推导，当嵌套层级的字段变为可空或可选后，TypeScript无法自动适配这种类型变化，显式指定泛型或调整更新方式可以消除类型不兼容错误。

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