useState未更新：函数内setState无法更新Firebase好友列表问题

核心问题点 #

• 函数未实际执行：在friends.map((f: string) => updateFriends);中，仅传递了updateFriends的函数引用，未实际调用它，导致状态更新逻辑完全没触发。
• 闭包导致的状态引用过期：updateFriends中直接依赖外部的friendList变量，由于闭包特性，它捕获的是getFriends执行时的初始friendList值（undefined），后续即使调用setState，函数内的friendList也不会更新。
• 低效的多次状态更新：遍历好友逐个调用setState会触发多次组件渲染，且容易引发状态不一致问题。

修复后的代码 #

function SideBarFriends (props: any) {
  const { sbView, setSbView } = useContext(ViewContext);
  // 初始化为空数组，避免undefined/null的额外判断
  const [friendList, setFriendList] = useState<string[]>([]);
  
  useEffect(() => {
    getFriends();
  }, []);

  function getFriends() {
    const query = userRef.where('uid', '==', auth.currentUser.uid);
    query.get().then((snapshot) => {
      const allFriends: string[] = [];
      snapshot.forEach((doc) => {
        const { friends } = doc.data();
        // 加判断避免friends为undefined的情况
        if (friends) {
          allFriends.push(...friends);
        }
      });
      // 一次性更新状态，避免多次渲染与闭包问题
      setFriendList(allFriends);
    }).catch(error => {
      // 处理Firebase查询可能出现的错误
      console.error('获取好友列表失败:', error);
    });
  }

  return(
    <section>
      <FontAwesomeIcon className='text-white/70 pl-4' icon={faMagnifyingGlass} onClick={() => setSbView(false)} />
      {/* 测试渲染好友列表 */}
      {friendList.length > 0 ? (
        <ul>
          {friendList.map(friendId => (
            <li key={friendId}>{friendId}</li>
          ))}
        </ul>
      ) : (
        <p>暂无好友</p>
      )}
    </section>
  );
}

关键修复说明 #

1. 初始化状态为空数组：简化后续空值判断逻辑，避免undefined引发的异常。
2. 一次性收集并更新状态：将所有好友数据存入临时数组后，单次调用setFriendList，既减少组件渲染次数，又彻底规避闭包导致的状态引用问题。
3. 添加错误处理：捕获Firebase查询的异常，方便调试权限、网络等问题。
4. 移除冗余的updateFriends函数：一次性更新的方式比逐个添加更简洁高效。

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