diff --git a/packages/runtime-core/__tests__/componentProps.spec.ts b/packages/runtime-core/__tests__/componentProps.spec.ts
index 89112f2ad49..9e9aac54f25 100644
--- a/packages/runtime-core/__tests__/componentProps.spec.ts
+++ b/packages/runtime-core/__tests__/componentProps.spec.ts
@@ -331,6 +331,8 @@ describe('component props', () => {
       props: {
         bool: { type: Boolean },
         str: { type: String },
+        symStr: { type: String },
+        sym: { type: Symbol },
         num: { type: Number },
         arr: { type: Array },
         obj: { type: Object },
@@ -346,6 +348,8 @@ describe('component props', () => {
       h(Comp, {
         bool: 'true',
         str: 100,
+        symStr: Symbol(),
+        sym: 'symbol',
         num: '100',
         arr: {},
         obj: 'false',
@@ -361,6 +365,12 @@ describe('component props', () => {
     expect(
       `Invalid prop: type check failed for prop "str". Expected String with value "100", got Number with value 100.`
     ).toHaveBeenWarned()
+    expect(
+      `Invalid prop: type check failed for prop "symStr". Expected String, got Symbol`
+    ).toHaveBeenWarned()
+    expect(
+      `Invalid prop: type check failed for prop "sym". Expected Symbol, got String with value "symbol".`
+    ).toHaveBeenWarned()
     expect(
       `Invalid prop: type check failed for prop "num". Expected Number with value 100, got String with value "100".`
     ).toHaveBeenWarned()
diff --git a/packages/runtime-core/src/componentProps.ts b/packages/runtime-core/src/componentProps.ts
index 4d402789555..6653638d4f8 100644
--- a/packages/runtime-core/src/componentProps.ts
+++ b/packages/runtime-core/src/componentProps.ts
@@ -10,6 +10,7 @@ import {
   hyphenate,
   capitalize,
   isString,
+  isSymbol,
   isFunction,
   isArray,
   isObject,
@@ -736,7 +737,7 @@ function getInvalidTypeMessage(
   if (
     expectedTypes.length === 1 &&
     isExplicable(expectedType) &&
-    !isBoolean(expectedType, receivedType)
+    isCoercible(expectedType, receivedType)
   ) {
     message += ` with value ${expectedValue}`
   }
@@ -752,7 +753,9 @@ function getInvalidTypeMessage(
  * dev only
  */
 function styleValue(value: unknown, type: string): string {
-  if (type === 'String') {
+  if (isSymbol(value)) {
+    return value.toString()
+  } else if (type === 'String') {
     return `"${value}"`
   } else if (type === 'Number') {
     return `${Number(value)}`
@@ -772,6 +775,9 @@ function isExplicable(type: string): boolean {
 /**
  * dev only
  */
-function isBoolean(...args: string[]): boolean {
-  return args.some(elem => elem.toLowerCase() === 'boolean')
+function isCoercible(...args: string[]): boolean {
+  return args.every(elem => {
+    const value = elem.toLowerCase()
+    return value !== 'boolean' && value !== 'symbol'
+  })
 }