Botpress自定义文件上传组件无法获取流程传入的会话accessToken

核心问题是传参链路存在层级不匹配，数据在到达组件之前就已经被截断，和组件本身的接收逻辑无关。

具体错配点 #

• 调用bp.cms.renderElement时的入参结构和content type定义不匹配
  你目前是把{accessToken: session.accessToken}这个对象直接作为第二个参数传给renderElement，但content type的渲染逻辑是从传入的data对象里读取data.options字段——相当于把本来应该挂在options键下的内容，直接当成了整个data对象传过去，content type自然读取不到options对应的值。
• 产生连锁异常
  因为content type读取不到data.options，会把undefined作为options字段拼到最终发给前端的custom组件payload里，前端React组件挂载时自然拿不到对应值，打印this.props时看不到传入的业务数据。

修复步骤 #

1. 修正Action里的传参结构，匹配content type定义的数据格式
   你的content type定义的可配置属性是options（对象类型），所以传给renderElement的第二个参数，必须包裹一层和属性名对应的键：

   const displayFileUpload = async () => {
     try {
         // 从session读取鉴权token
         const uploadOptions = { accessToken: session.accessToken }
         // 关键修正：把uploadOptions挂到options键下，匹配content type的结构要求
         const payloads = await bp.cms.renderElement('file-upload', { options: uploadOptions }, event)
         await bp.events.replyToEvent(event, payloads)
     } catch (error) {
       console.log(error)
       const payload = await bp.cms.renderElement('builtin_text', { text: '上传组件加载失败' }, event)
       await bp.events.replyToEvent(event, payload)
     }
   }
   return displayFileUpload()
   

2. 增加临时调试日志，确认服务端链路通断
   可以在content type的render函数里加临时日志，验证服务端是否正确读到了传入的options：

   function render(data) {
     // 临时调试日志，确认参数读取正常
     console.log('Content type 收到的参数:', data)
     return [{
       type: 'custom',
       module: 'custom-component',
       component: 'FileUpload',
       options: data.options
     }];
   }
   

3. 验证组件侧的取值逻辑
   完成上面的修正后，组件侧的this.props.options就能正常拿到包含accessToken的对象。如果还是出现取值为undefined的情况，可以在组件的componentDidMount里打印全量props，确认Botpress客户端是否正确把payload里的options字段映射到组件props上。

注意：

1. Botpress自定义组件的payload映射规则为，content type返回的所有自定义字段，都会被原样挂到组件的props上，不需要额外做字段映射，只要payload中存在对应字段，组件的this.props就能读取到。
2. 你当前content type里的computePreviewText逻辑是读取formData.text字段，由于schema中没有定义text字段，后台预览会显示File Upload: undefined，这部分不影响实际功能，后续需要优化预览的话可以调整读取的字段为formData.options相关内容。

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