Typescript中如何将函数返回值作为变量值？附Zustand实操场景

解决方案 #

首先修正你代码里的几个错误，再调整逻辑实现需求：

• 违反React Hook规则：useAuth是React Hook，不能在组件/自定义Hook之外的顶层作用域直接调用，我们调整为执行角色拉取逻辑时再传入token即可。
• 类型声明遗漏：原UserStore类型没有定义getRole方法，需要补全。
• 缺少边界校验：没有处理token为空、接口请求失败的异常场景。

调整后完整代码如下：

import create from "zustand";
import UserService from "../../services/authentication/userService";

// 补全Store类型
type UserStore = {
    role: string,
    setRole: (accessToken: string) => Promise<void>,
    getRole: (accessToken?: string) => string
}

const useUserStore = create<UserStore>((set, get) => ({
    // 初始role设为空值
    role: '',
    setRole: async (accessToken: string) => {
        if (!accessToken) return
        try {
            const res = await UserService.getUserRole(accessToken)
            // Zustand的set方法会自动合并状态，不需要展开旧state
            set({ role: res })
        } catch (err) {
            console.error('获取用户角色失败', err)
        }
    },
    getRole: (accessToken?: string) => {
        const cachedRole = get().role
        // 没有缓存的角色且传入了有效token时，自动触发拉取
        if (!cachedRole && accessToken) {
            get().setRole(accessToken)
        }
        return cachedRole
    }
}));

export default useUserStore

组件内使用方式 #

import { useAuth } from "react-oidc-context";
import useUserStore from "./你的store路径";

const DemoComponent = () => {
  const auth = useAuth()
  const getRole = useUserStore(state => state.getRole)
  // 直接调用getRole就能拿到角色，不存在时会自动发起请求拉取，下次调用就会返回缓存的角色值
  const userRole = getRole(auth.user?.access_token)

  // 业务逻辑使用userRole即可
  return <div>当前用户角色：{userRole || '加载中'}</div>
}

如果希望完全不需要手动调用getRole，访问role字段时自动触发懒加载逻辑，可以引入Zustand的computed中间件封装衍生状态，实现无感取值。

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