Angular+NGRX页面刷新/离开时出现undefined 'id'错误求助

这个问题我太熟了——你碰到的是典型的边界状态未处理的问题！报错Cannot read property 'id' of undefined，本质是刷新页面或离开返回后，getSelectedPost返回的是undefined，这时候直接访问post.id自然会炸。

为什么首次启动正常，刷新就不行？ #

首次加载应用时，你的初始化逻辑（比如组件挂载时默认选中第一个帖子、或者路由参数带了postID并同步到redux）让getSelectedPost能拿到有效的post对象；但刷新页面后，Redux状态会被重置，或者离开页面后选中状态没被持久化（比如没存在localStorage/URL参数里），这时候getSelectedPost就返回undefined了。

最直接的修复方案：在选择器里加空值检查 #

修改你的getCommentsByPostID选择器，先判断post是否存在，再执行过滤逻辑：

export const getCommentsByPostID = createSelector(
  getSelectedPost,
  getComments,
  (post, comments) => {
    // 当post不存在时，直接返回空数组，避免报错
    if (!post) return [];
    return comments.filter(comment => comment.postID === post.id);
  }
);

进阶优化：从根源避免getSelectedPost返回undefined #

如果你的应用场景要求必须有选中的帖子，那可以从状态初始化入手：

• 在Redux的初始state里，给selectedPost设置一个默认值（比如数组里的第一个帖子）；
• 如果是路由驱动的选中状态，确保刷新页面时能从URL参数里解析出postID，同步到Redux状态中；
• 用持久化中间件（比如redux-persist）把选中状态存在localStorage，页面刷新后自动恢复。

调试小技巧 #

如果不确定post什么时候会变成undefined，可以在选择器里加个日志，快速定位问题：

export const getCommentsByPostID = createSelector(
  getSelectedPost,
  getComments,
  (post, comments) => {
    console.log('当前选中的post:', post); // 刷新后看看这里的输出
    if (!post) return [];
    return comments.filter(comment => comment.postID === post.id);
  }
);

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