Flutter Web插件对接FreshChat SDK：Dart传参至JS遇LegacyJavaScriptObject错误

问题原因 #

Dart的Map<String, dynamic>无法直接作为参数传递给JavaScript方法，会被转换为LegacyJavaScriptObject，而FreshChat的SDK需要标准的JS对象，因此触发参数无效错误。另外原代码中setProperties定义为Future<void>也不合理——FreshChat的JS方法是同步执行的，没有返回Promise，无需用Future包装。

解决方案1：使用jsify转换Dart Map为JS对象 #

这是最灵活的方式，适合处理自定义属性：

1. 更新互操作代码 #

@JS()
library freshchat_sdk;

import 'package:js/js.dart';
import 'dart:js' as js;

@JS('window.fcWidget.open')
external void open();

// 修改参数类型为JsObject，对应JS标准对象
@JS('window.fcWidget.user.setProperties')
external void setProperties(js.JsObject properties);

2. 调用方法时转换参数 #

void setFreshChatUserProperties() {
  // 用jsify把Dart Map转成JS对象
  final userProps = js.jsify({
    'firstName': '张三',
    'lastName': '李四',
    'email': 'zhangsan@example.com',
    'phone': '13800138000',
    'phoneCountry': 'CN',
    'plan': 'Estate',
    'status': 'Active',
    'Last Payment': '12th August'
  });
  
  setProperties(userProps);
}

解决方案2：定义对应JS对象的Dart类 #

适合属性固定的场景，类型更安全：

1. 更新互操作代码 #

@JS()
library freshchat_sdk;

import 'package:js/js.dart';

@JS('window.fcWidget.open')
external void open();

// 定义与JS对象结构匹配的Dart类
@JS()
class UserProperties {
  external factory UserProperties({
    String? firstName,
    String? lastName,
    String? email,
    String? phone,
    String? phoneCountry,
    String? plan,
    String? status,
    // 带空格的属性用@JS注解指定键名
    @JS('Last Payment') String? lastPayment,
  });
}

@JS('window.fcWidget.user.setProperties')
external void setProperties(UserProperties properties);

2. 调用方法 #

void setFreshChatUserProperties() {
  final props = UserProperties(
    firstName: '张三',
    lastName: '李四',
    email: 'zhangsan@example.com',
    plan: 'Estate',
    status: 'Active',
    lastPayment: '12th August',
  );
  
  setProperties(props);
}

关键注意事项 #

• 不要给同步JS方法定义Future返回值，否则会导致Dart错误处理异常。
• 自定义属性如果包含特殊字符（如空格），要么用jsify传入带特殊键的Map，要么在类中用@JS('键名')注解标记对应的字段。

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