socket.io-client中useEffect清理函数报错问题求助

错误原因拆解 #

这个TypeScript报错的核心是useEffect清理函数的返回值不符合React的类型约束：
React要求useEffect的清理函数（Destructor）要么返回void，要么返回一个不返回任何值的函数。但socket.close()方法会返回Socket实例本身，你写的return () => socket.close()相当于让清理函数返回了Socket对象，直接违反了类型规则，所以TypeScript抛出了类型不匹配的错误。

另外原代码还存在隐藏问题：依赖数组中包含socket状态，每次调用setSocket(socket)更新状态后，会触发useEffect重新执行，导致重复创建socket连接，引发不必要的资源浪费和连接抖动。

修复代码 #

方案1：快速修正类型错误 #

如果只想先解决类型报错，只需修改清理函数，确保它不返回任何值，同时移除引发循环的依赖：

useEffect(() => {
  if (authUser) {
    const socket = io("http://localhost:5000", {
      query: {
        userId: authUser._id,
      },
    });

    setSocket(socket);

    socket.on("getOnlineUsers", (users: string[]) => {
      setOnlineUsers(users);
    });

    // 用块级作用域包裹，确保函数不返回socket.close()的结果
    return () => {
      socket.close();
    };

  } else {
    if (socket) {
      socket.close();
      setSocket(null);
    }
  }
}, [authUser]); // 移除socket依赖，避免无限循环

方案2：更健壮的实现（用useRef存储socket） #

用useRef代替useState存储socket实例，既能避免状态更新导致的重渲染循环，又能保证在任何时候拿到最新的socket引用：

import { useRef, useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';

const [onlineUsers, setOnlineUsers] = useState<string[]>([]);
const socketRef = useRef<Socket | null>(null);

useEffect(() => {
  if (authUser) {
    const socket = io("http://localhost:5000", {
      query: {
        userId: authUser._id,
      },
    });

    socketRef.current = socket;

    socket.on("getOnlineUsers", (users: string[]) => {
      setOnlineUsers(users);
    });

    // 清理函数：关闭连接并清空ref
    return () => {
      socket.close();
      socketRef.current = null;
    };

  } else {
    // 未登录时关闭现有连接
    if (socketRef.current) {
      socketRef.current.close();
      socketRef.current = null;
    }
  }
}, [authUser]); // 仅依赖authUser，逻辑更清晰

关键说明 #

• 清理函数必须返回void：用块级作用域包裹socket.close()调用，避免返回方法的执行结果（Socket实例）。
• 避免用useState存socket：useState更新会触发组件重渲染，而socket实例不需要触发UI更新，用useRef存储更合适，还能避免依赖循环问题。
• 依赖数组只保留必要项：只有当authUser变化时才需要创建/销毁socket连接，移除不必要的依赖可以减少无效的useEffect执行。

内容的提问来源于stack exchange，提问作者L ' Labradon