从Redux Store获取用户详情的Helper函数多用户场景下报错

你遇到的问题核心是：新增用户后，用户对象里某个属性的值不是字符串/数组类型（比如数字、null、undefined），直接调用includes()方法时就会抛出错误——毕竟只有字符串和数组才有这个方法，之前单用户场景刚好所有属性都是字符串，所以没触发问题。

先拆解下原代码的隐患：你的getUserDetails函数会遍历用户对象的所有键，然后直接调用obj[key].includes(searchKey)，完全没判断属性值的类型，一旦碰到非字符串/数组的属性，报错就不可避免。

下面给你几个针对性的解决方案：

方案一：先校验类型再调用includes #

修改过滤逻辑，先确认属性值是字符串或数组，再执行包含检查，同时提前处理users或searchKey为空的边界情况：

import { useSelector } from 'react-redux';
export function getUserDetails(searchKey) {
 const users = useSelector((state) => state.firestore.ordered.users);
 // 边界情况处理：无数据或无搜索键时返回空数组
 if (!users || !searchKey) return [];
 
 return users.filter(obj => {
 return Object.keys(obj).some(key => {
 const value = obj[key];
 // 仅对字符串/数组类型执行includes检查
 return (typeof value === 'string' || Array.isArray(value)) && value.includes(searchKey);
 });
 });
}

方案二：优化查找范围，只检查目标字段（更高效） #

既然你是通过createdBy字段匹配用户，完全没必要遍历所有属性——只检查uid（你用来匹配的字段）、displayName、email这些核心字段就行，既减少无效判断，也能避开无关字段的类型问题：

import { useSelector } from 'react-redux';
export function getUserDetails(searchKey) {
 const users = useSelector((state) => state.firestore.ordered.users);
 if (!users || !searchKey) return [];
 
 // 只检查业务相关的字段
 const targetFields = ['uid', 'displayName', 'email'];
 return users.filter(user => {
 return targetFields.some(field => {
 const value = user[field];
 return (typeof value === 'string' || Array.isArray(value)) && value.includes(searchKey);
 });
 });
}

额外兜底：处理找不到用户的情况 #

你的UserNameFormatter直接取getUserDetails(value)[0].displayName，如果没匹配到用户，[0]会是undefined，调用.displayName又会触发新错误。建议加上兜底逻辑：

const UserNameFormatter = ({ value }) => {
 const matchedUser = getUserDetails(value)[0];
 // 找不到用户时返回默认值，比如原ID或"未知用户"
 return matchedUser?.displayName || value || "Unknown User";
};

这样修改后，不管是新增用户带来的类型问题，还是无匹配用户的场景，都能平稳处理，不会再抛出错误。

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