Ngrx Selector报错：无法读取undefined的'payload'属性

出现 ERROR TypeError: Cannot read properties of undefined (reading 'payload') 的核心原因是：组件订阅 selectCustomer 时，selector 中获取到的 customerstate 可能为 undefined，或者 CustomerState 的初始状态未正确初始化 payload 字段。

具体修复步骤 #

1. 确保 CustomerState 初始状态完整 #

检查你的 customer.reducer.ts，初始状态必须包含所有定义的字段，哪怕是默认空值：

// customer.reducer.ts
export interface CustomerState {
  payload: Customer | null; // 明确类型，允许为空
  loading: boolean;
}

// 初始化所有字段，避免undefined
export const initialState: CustomerState = {
  payload: null,
  loading: false
};

2. 给 selector 添加空值保护 #

在 selectCustomer 中使用可选链操作符 ?.，避免直接访问 undefined 的属性：

export const selectCustomer = createSelector(
  appSelectCustomer,
  (state) => state?.payload // 当state为undefined时，直接返回undefined，不会报错
);

3. 校验 AppState 与 reducer 注册的一致性 #

确认 AppState 中的字段名和你在 StoreModule.forRoot 中注册 reducer 时的 key 完全一致：

// app.states.ts
export interface AppState {
  customerstate: CustomerState; // 必须和reducer注册的key完全匹配
}

4. 组件订阅时过滤空值（可选） #

如果不想让组件处理空值，可以在订阅前过滤掉无效数据：

ngOnInit(): void {
  this.store.select(selectCustomer)
    .pipe(filter(res => res !== null)) // 只处理非空的payload
    .subscribe((res) => {this.data = res});
}

额外优化建议 #

可以结合空值合并运算符 ??，给 selector 设置默认返回值，进一步避免组件收到 undefined：

export const selectCustomer = createSelector(
  appSelectCustomer,
  (state) => state?.payload ?? {} // 当payload为空时，返回空对象
);

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