TypeORM查询返回的关联对象位于[[prototype]]无法访问如何解决

问题根因 #

TypeORM 默认通过 find 方法查询返回的是实体类的实例对象，而非普通 JavaScript 对象。你配置的关联属性 department 默认挂载在实例的原型链上，后端调用 response.json() 做序列化时，不会自动把原型链上的属性序列化到返回结果中，所以前端拿到的数据里没有 department 字段，直接读取自然返回 undefined。

解决方案（优先改后端，一劳永逸） #

方案1：查询时添加 raw 参数 #

查询时直接指定返回原始普通对象，不需要实体类实例：

const users = await usersRepository.find({     
  relations: ['department'],
  raw: true
});

方案2：将实体实例转为普通对象后再返回 #

使用 TypeORM 生态常用的 class-transformer 工具（大部分 TypeORM 项目默认已安装），在返回前把实体实例转为普通 JS 对象，原型链上的关联属性会被提取到对象自身属性中：

import { instanceToPlain } from 'class-transformer';

usersRouter.get('/', async (request, response) => {   
  const usersRepository = getCustomRepository(UsersRepository);   
  const users = await usersRepository.find({ relations: ['department'] });
  return response.json(instanceToPlain(users)); 
});

方案3：使用 QueryBuilder 查询 #

如果以上方案不生效，可以用查询构造器直接获取原始数据：

const users = await usersRepository
  .createQueryBuilder('user')
  .leftJoinAndSelect('user.department', 'department')
  .getRawMany();

前端临时兼容方案 #

如果后端暂时无法修改，可以在前端做临时兼容处理：

1. 首先对渲染代码做可选链兜底，避免页面报错崩溃：

<td className="pr-0 text-right text-dark">{users?.department?.name || '-'}</td>

2. 接收接口数据时，手动把原型链属性提取到对象自身：

const getUsers = async () => {
  const data = await getUsersDataId(id)
  // JSON序列化会自动把原型链可枚举属性转成自身属性
  const plainData = JSON.parse(JSON.stringify(data))
  setUsers(plainData)
}

额外检查项 #

确认你的 Users 实体类的关联配置正确，示例配置参考：

// Users 实体类中
@ManyToOne(() => Department, department => department.users)
@JoinColumn({ name: 'departmentId' })
department: Department;

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