TypeScript导入JSON处理后对象属性访问返回undefined问题

编辑说明：我最初提交的问题版本过度简化，仅能复现导入整个对象的场景，无法体现属性无法访问的问题，现已更新内容以更精准地演示实际问题，同时补充了实际程序中会使用的async/await逻辑。

• 已在JSON数据中加入错误条目模拟实际使用中易出错的数据源，同时添加try/catch块用于跳过错误迭代，该调整不会改变预期功能逻辑。
• 预期实现流程：在TypeScript模块中导入JSON数据，执行处理逻辑后返回包含结果的对象字面量，再将该对象导入其他文件执行后续操作，支持通过点表示法访问对象属性。
• 当前异常：导入后仅能访问对象本身，所有属性访问操作均返回undefined。

我已尽可能简化操作逻辑隔离定位问题，但始终未找到根因，相关代码如下：

示例代码 #

数据源 rawdata.json #

{
    "THINGS":[
        {
            "name":"thing1",
            "color":"blue"
        },
        {
            "name":"thing2",
            "color":"red"
        },
        {
            "name":"thing3",
            "color":"orange"
        },
        {
            "name":"thing4",
            "color":"purple"
        },
        {
            "error": "error",
            "error2": "error"
        }
    ]
}

测试逻辑代码 #

import rawdata from './rawdata.json' assert { type: "json" };

export async function test(){
    const data = rawdata.THINGS.map(async(Data)=>{
        let name = Data.name;
        let color = Data.color;
        let obj = {
            "name": name,
            "color": color
        }
        return obj
    });
    return(data)
};

// 传入其他函数执行后续处理
async function testImport(){
    let d = await test();
    let q = d.map((e) => {
        let p = (d.name + " wuz here")
        return p
    });
    console.log(q)
}
testImport();

运行后输出结果：

[
  'undefined wuz here',
  'undefined wuz here',
  'undefined wuz here',
  'undefined wuz here',
  'undefined wuz here'
]

问题根因 #

代码里有两处核心错误，和模块导入、JSON解析无关：

1. async回调的map返回值未做Promise.all处理：给Array.map传入async回调时，map的返回值是Promise[]（每个元素都是未resolve的Promise对象），而非预期的普通对象数组。直接return这个数组后，外层await test()等待的是数组本身（数组不是Promise，会直接返回原值），根本没有等待数组内的Promise执行完成，拿到的d全是Promise对象，自然读不到name、color属性。
2. 遍历数组时变量引用错误：在testImport的map遍历里，回调参数是当前遍历的单个元素e，但代码写的是d.name——d是整个数组对象，数组本身没有name属性，访问结果必然是undefined。

另外JSON里最后一个错误条目本身就没有name、color字段，就算前两个问题修复，这一项也会返回undefined，需要做过滤处理。

修复后代码 #

import rawdata from './rawdata.json' assert { type: "json" };

export async function test(){
    // 用Promise.all包裹map返回的Promise数组，等待所有异步任务解析完成
    const data = await Promise.all(rawdata.THINGS.map(async(Data)=>{
        // 跳过错误条目
        if (!Data.name || !Data.color) return null;
        let name = Data.name;
        let color = Data.color;
        return {
            name,
            color
        }
    }));
    // 过滤掉空的错误项
    return data.filter(Boolean);
};

async function testImport(){
    let d = await test();
    // 遍历单个元素e，访问e的name属性
    let q = d.map((e) => {
        let p = (e.name + " wuz here")
        return p
    });
    console.log(q)
}
testImport();

运行后输出符合预期：

[
  'thing1 wuz here',
  'thing2 wuz here',
  'thing3 wuz here',
  'thing4 wuz here'
]

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