diff --git a/client/web/plugins/com.msgbyte.bbcode/src/__tests__/__snapshots__/render.spec.tsx.snap b/client/web/plugins/com.msgbyte.bbcode/src/__tests__/__snapshots__/render.spec.tsx.snap
index 01883699..76061f3a 100644
--- a/client/web/plugins/com.msgbyte.bbcode/src/__tests__/__snapshots__/render.spec.tsx.snap
+++ b/client/web/plugins/com.msgbyte.bbcode/src/__tests__/__snapshots__/render.spec.tsx.snap
@@ -7,7 +7,7 @@ exports[`render <BBCode /> mention with space name 1`] = `
     data-userid="6251986eab331ca2efbba9c6"
   >
     @
-    Notify Bot
+    [UserName {"userId":"6251986eab331ca2efbba9c6","fallbackName":"Notify Bot"}]
   </span>
   <pre
     style="display: inline; white-space: break-spaces;"
diff --git a/client/web/src/components/UserName.tsx b/client/web/src/components/UserName.tsx
index 1e71c036..5c093f25 100644
--- a/client/web/src/components/UserName.tsx
+++ b/client/web/src/components/UserName.tsx
@@ -17,12 +17,13 @@ interface UserNameProps {
  * 纯净版的 UserName, 无需redux上下文
  */
 export const UserNamePure: React.FC<UserNameProps> = React.memo((props) => {
-  const { userId, showDiscriminator, className, style } = props;
+  const { userId, showDiscriminator, className, style, fallbackName } = props;
   const cachedUserInfo = useCachedUserInfo(userId);
 
   return (
     <span className={className} style={style}>
-      {cachedUserInfo.nickname ?? <span>&nbsp;</span>}
+      {cachedUserInfo.nickname ??
+        (isValidStr(fallbackName) ? fallbackName : <span>&nbsp;</span>)}
 
       {showDiscriminator && (
         <UserNameDiscriminator discriminator={cachedUserInfo.discriminator} />
diff --git a/client/web/src/components/__mocks__/UserName.tsx b/client/web/src/components/__mocks__/UserName.tsx
new file mode 100644
index 00000000..fd5b7456
--- /dev/null
+++ b/client/web/src/components/__mocks__/UserName.tsx
@@ -0,0 +1,3 @@
+export function UserName(props: any) {
+  return `[UserName ${JSON.stringify(props)}]`;
+}
diff --git a/client/web/test/setup.js b/client/web/test/setup.js
index e83b8f7b..9c4352e7 100644
--- a/client/web/test/setup.js
+++ b/client/web/test/setup.js
@@ -4,6 +4,7 @@ jest.mock('tailchat-design/components/Icon', () => ({
   Icon: ({ icon }) => `[iconify icon="${icon}"]`,
 }));
 jest.mock('../src/components/Loadable');
+jest.mock('../src/components/UserName');
 
 const ignoreErroMessages = [
   /Warning.*not wrapped in act/,