React-Admin权限控制报错：TypeError: childrenFuncResult.filter is not a function

问题背景 #

尝试通过React-Admin的permissions机制限制资源访问，代码参考官方权限控制示例，但运行后出现如下错误：

react_devtools_backend.js:4026 TypeError: childrenFuncResult.filter is not a function
    at CoreAdminRouter.js:85:1
    at step (CoreAdminRouter.js:43:1)
    at Object.next (CoreAdminRouter.js:24:1)
    at fulfilled (CoreAdminRouter.js:15:1)

原始代码：

<Admin
    dataProvider={dataProvider}
    authProvider={authProvider}
>
    {permissions => (
        <>
            <Resource
                name="customers"
                list={VisitorList}
                edit={permissions.admin === 'true' ? VisitorEdit : null}
                icon={VisitorIcon}
            />
            {permissions.admin === 'true'
                ? <Resource name="categories" list={CategoryList} edit={CategoryEdit} icon={CategoryIcon} />
                : null}
        </>
    )}
</Admin>

当前permissions对象结构：

{
  "admin": true,
  "iss": "https://securetoken.google.com/prototype-XXXXXXX",
  "aud": "prototype-XXXXXX",
  "auth_time": 1662121211,
  "user_id": "iVLBTt2XXXXXXXXXxzSsmJVHI3",
  "sub": "iVLBTtXXXXXXXXXxzSsmJVHI3",
  "iat": 166XXXXX11,
  "exp": 166XXXXx11,
  "email": "admin@org.com",
  "email_verified": false,
  "firebase": {
    "identities": {
      "email": [
        "admin@org.com"
      ]
    },
    "sign_in_provider": "password"
  }
}

错误原因 #

1. 返回值类型不匹配：React-Admin的Admin组件要求子函数返回Resource组件的数组或单个Resource组件，而代码中使用了React Fragment（<>）包裹，Fragment会被视为单个React元素，内部的Resource组件无法被filter方法遍历处理，导致报错。
2. 权限判断条件错误：permissions.admin是布尔值true，但代码中用permissions.admin === 'true'（字符串比较），会导致权限判断逻辑失效，非管理员用户也可能出现不符合预期的渲染。

修复方案 #

1. 替换Fragment为数组 #

将包裹Resource的Fragment换成数组，直接返回Resource组件的列表（给每个Resource添加唯一key，避免React渲染警告）。

2. 修正权限判断逻辑 #

直接使用布尔值判断permissions.admin，无需和字符串比较。

修复后的代码：

<Admin
    dataProvider={dataProvider}
    authProvider={authProvider}
>
    {permissions => ([
        <Resource
            key="customers"
            name="customers"
            list={VisitorList}
            edit={permissions.admin ? VisitorEdit : null}
            icon={VisitorIcon}
        />,
        permissions.admin && (
            <Resource
                key="categories"
                name="categories"
                list={CategoryList}
                edit={CategoryEdit}
                icon={CategoryIcon}
            />
        )
    ])}
</Admin>

说明 #

• 数组中的permissions.admin && <Resource />语法会在admin为true时渲染该Resource，否则返回false，React会自动忽略数组中的布尔值、null等无效元素。
• 给每个Resource添加唯一的key属性，符合React列表渲染的要求，避免控制台警告。

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