React Context使用时遇TS2339错误：company_token不存在于Company[]类型

问题根源 #

你在Context里把company的类型声明成了Company[]（数组），但实际doGetToken返回的是单个Company对象（结构{company_token:"43fwef4"}）。数组类型没有company_token属性，所以TypeScript报错。

分步修正 #

1. 修正Context的类型定义

打开company-context.tsx，修改CompanyContextData接口：

export interface CompanyContextData {
    company: Company | undefined; // 从数组改为单个对象或undefined
    loadCompany: (company: Company) => void; // 参数从空数组改为Company类型
}

2. 更新Context默认值

把默认值里的空数组换成undefined：

const CompanyContextDefaultValue: CompanyContextData = {
    company: undefined,
    loadCompany: () => null,
};

3. 修正loadCompany回调的参数类型

在useCompanyContextValue里，把loadCompany的参数类型从[]改成Company：

const loadCompany = React.useCallback((company: Company) => dispatch(actions.loadCompany(company)), []);

同时要确保你的CompanyReducer和actions.loadCompany也支持接收单个Company对象，比如defaultState里的company要初始化为undefined而非空数组。

4. 调整Home组件的逻辑

因为company现在可能是undefined，调用doGetArticles前必须先判断它是否存在，同时修正useEffect的依赖数组：

useEffect(() => {
    const load = async () => {
        // 先获取token并更新Context
        await call(
            () => doGetToken('https://quadrifoglio.expressleather.app'),
            (response) => {
                if (response) loadCompany(response);
            }
        );

        // 确保company存在后再调用第二个API
        if (company) {
            await call(
                () => doGetArticles(company.company_token),
                (response) => {
                    if (response.articles) loadArticles(response.articles);
                    if (response.categories) loadCategories(response.categories);
                }
            );
        }
    };

    load();
}, [loadCompany, company]); // 添加依赖避免闭包问题

额外注意 #

• 检查../types里的Company类型定义，确保它包含company_token属性：

export type Company = {
    company_token: string;
};

• 如果doGetToken可能返回null/undefined，要在回调里做更严谨的判断，避免把无效值传给loadCompany。

内容的提问来源于stack exchange，提问作者mrk-nrd-dev