MERN栈聊天应用Socket.IO报错：TypeError: Cannot read properties of undefined (reading 'socketId')

问题分析 #

你遇到的这个TypeError原因很明确：当发送消息时，getUser(receiverId)返回了undefined，说明接收方不在当前的在线用户列表里，后续尝试访问user.socketId自然就会触发报错，甚至导致Socket服务崩溃。

解决方案 #

我们可以通过几个步骤修复这个问题，同时让你的Socket服务更健壮：

1. 添加接收方存在性检查（核心修复） #

修改后端socket/index.js里的sendMessage事件处理逻辑，先确认找到接收方用户再发送消息：

socket.on("sendMessage", ({ senderId, receiverId, text }) => {
  const user = getUser(receiverId);
  // 先检查目标用户是否在线
  if (user) {
    io.to(user.socketId).emit("getMessage", {
      senderId,
      text,
    });
  } else {
    // 可选：记录日志，或者给发送方返回离线提示
    console.log(`无法找到在线用户：${receiverId}`);
    // 可选：给发送者推送消息未送达的通知
    socket.emit("messageNotDelivered", { 
      receiverId, 
      reason: "对方当前不在线" 
    });
  }
});

这样即使接收方离线，服务也不会崩溃，而是优雅地跳过发送或给出提示。

2. 优化在线用户管理逻辑 #

当前的addUser函数只会添加新用户，但如果用户刷新页面重新连接，会生成新的socketId，旧的socketId还留在列表里。我们可以更新逻辑，确保同一个用户只会保留最新的socketId：

const addUser = (userId, socketId) => {
  const existingUser = users.find(user => user.userId === userId);
  if (existingUser) {
    // 用户已存在，更新为最新的socketId
    existingUser.socketId = socketId;
  } else {
    users.push({ userId, socketId });
  }
};

这能避免同一个用户在列表里有多个无效条目，减少getUser返回异常的概率。

3. 验证前端receiverId的正确性 #

检查前端获取receiverId的逻辑：

const receiverId = currentChat.members.find(
  (member) => member !== user._id
);

确保currentChat.members数组里确实包含两个有效的用户ID，且格式和后端存储的一致（比如都是字符串，没有ObjectId和字符串的类型差异）。如果currentChat的结构有问题，可能会导致receiverId获取错误，进而让后端找不到用户。

4. 前端可选：处理消息未送达的情况 #

如果后端添加了messageNotDelivered事件，前端可以监听这个事件，给用户友好提示：

useEffect(() => {
  socket.current = io("ws://localhost:8900");
  // 新增监听未送达事件
  socket.current.on("messageNotDelivered", (data) => {
    alert(`消息未发送：${data.reason}`);
  });
  // 其他监听逻辑...
}, []);

总结 #

核心问题是没有处理接收方不在线的边界情况，导致访问undefined的属性。通过添加存在性检查，就能直接解决服务崩溃的问题；再配合优化用户管理和前端逻辑，能让整个聊天功能更稳定。

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