
在使用 ngrx 时,若 selector 函数缺少 return 语句,会导致其隐式返回 void,从而使得 select() 返回的 observable 类型为 observable
该错误的根本原因在于 NgRx 的 createSelector 函数依赖 selector 回调的明确返回值。当你在箭头函数中使用花括号 {} 却未显式写 return,JavaScript 会将函数体视为普通语句块,最终返回 undefined(类型为 void),而非你期望的 state.comments 数组。
回顾你原始的选择器代码:
export const commentsSelector = createSelector(selectFeature, (state) => {
state.comments; // ❌ 无 return → 隐式返回 void
});尽管 state.comments 被求值,但它未被返回,因此整个 selector 的返回类型推导为 void,进而导致 this.store.pipe(select(commentsSelector)) 的类型是 Observable
✅ 正确写法有两种等价方式:
方式一:显式 return(推荐,语义清晰)
export const commentsSelector = createSelector(selectFeature, (state) => {
return state.comments; // ✅ 明确返回 IComment[]
});方式二:隐式返回(单表达式、无花括号)
export const commentsSelector = createSelector(selectFeature, (state) => state.comments // ✅ 自动返回表达式结果 );
同理,请一并修正其他 selector:
export const isLoadingSelector = createSelector(selectFeature, (state) =>
state.isLoading // ✅ 而非 { state.isLoading; }
);
export const errorSelector = createSelector(selectFeature, (state) =>
state.error // ✅
);⚠️ 注意事项:
- TypeScript 在严格模式下会精准捕获此类类型不匹配,这是类型安全的体现,切勿通过 as any 或 // @ts-ignore 绕过;
- 建议在 tsconfig.json 中启用 "strict": true 和 "noImplicitReturns": true,以便在开发阶段提前发现遗漏的 return;
- 若 selector 逻辑稍复杂(如需条件判断或多行处理),务必使用 {} + return,避免隐式返回陷阱。
修复后,comments$ 将正确推导为 Observable










