无法访问TypeScript接口属性：为何不识别about属性？

问题场景 #

你尝试用TypeScript定义云函数，代码如下：

export async function updateDraftProject(data: {
    projectUpdates: {
        'submitted.about.categories'?: PrivateProjectInterface['submitted']['about']['categories'];
    };
}) {
    ...
};

但在['about']处触发报错：

Property 'about' does not exist on type 'ProjectContentInterface | undefined'.

相关接口定义：

export declare interface PrivateProjectInterface {
    submitted?: ProjectContentInterface;
}

declare interface ProjectContentInterface {
    about?: {
        categories?: string[];
    };
}

报错原因 #

PrivateProjectInterface中的submitted是可选属性（带有?标记），因此PrivateProjectInterface['submitted']的类型是ProjectContentInterface | undefined。TypeScript的类型系统会严格检查联合类型的属性访问：当你尝试访问['about']时，由于undefined类型不存在about属性，就会抛出错误。即使ProjectContentInterface里的about也是可选的，第一步的submitted可能为undefined的情况已经阻断了后续的类型查询。

解决方案 #

方案1：用NonNullable排除undefined（假设submitted一定存在） #

通过NonNullable工具类型移除submitted的undefined可能性，确保后续类型查询能正常访问about：

export async function updateDraftProject(data: {
    projectUpdates: {
        'submitted.about.categories'?: NonNullable<PrivateProjectInterface['submitted']>['about']['categories'];
    };
}) {
    ...
};

此时NonNullable<PrivateProjectInterface['submitted']>的类型为ProjectContentInterface，后续查询['about']['categories']会得到string[] | undefined，与接口的可选定义完全匹配。

方案2：用条件类型逐层处理可选属性（严格兼容所有情况） #

如果需要严格处理submitted和about都可能不存在的场景，可以用条件类型逐层推导：

// 逐层推导categories的类型
type CategoriesType = PrivateProjectInterface['submitted'] extends ProjectContentInterface 
  ? PrivateProjectInterface['submitted']['about'] extends { categories?: infer C } 
    ? C 
    : never 
  : never;

export async function updateDraftProject(data: {
    projectUpdates: {
        'submitted.about.categories'?: CategoriesType;
    };
}) {
    ...
};

最终CategoriesType的类型为string[] | undefined，完全符合接口的可选属性定义。

方案3：修改接口为必填属性（业务逻辑允许时） #

如果业务上submitted和about一定存在，可以直接去掉接口中的?标记，让属性变为必填：

export declare interface PrivateProjectInterface {
    submitted: ProjectContentInterface; // 移除?
}

declare interface ProjectContentInterface {
    about: { // 移除?
        categories?: string[];
    };
}

修改后原类型查询代码不再报错，但需要确保业务逻辑中这两个属性不会为undefined。

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