如何修复 NgRx 选择器中 Observable 类型不匹配错误

在使用 ngrx 时，若 selector 函数缺少 return 语句，会导致其隐式返回 void，从而使得 select() 返回的 observable 类型为 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，与 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，isLoading$ 为 Observable，组件类型检查即可通过，且状态订阅行为符合预期。