diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBar.ts b/packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBar.ts
index fab0879d42b4..8963b581e361 100644
--- a/packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBar.ts
+++ b/packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBar.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useState, useEffect} from 'react';
+import {useState, useEffect, useCallback} from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 const STORAGE_DISMISS_KEY = 'docusaurus.announcement.dismiss';
@@ -15,23 +15,29 @@ const useAnnouncementBar = (): {
   isAnnouncementBarClosed: boolean;
   closeAnnouncementBar: () => void;
 } => {
-  const {
-    siteConfig: {
-      themeConfig: {announcementBar: {id = 'annoucement-bar'} = {}} = {},
-    } = {},
-  } = useDocusaurusContext();
+  const {announcementBar} = useDocusaurusContext().siteConfig.themeConfig;
+
   const [isClosed, setClosed] = useState(true);
-  const handleClose = () => {
+
+  const handleClose = useCallback(() => {
     localStorage.setItem(STORAGE_DISMISS_KEY, 'true');
     setClosed(true);
-  };
+  }, []);
 
   useEffect(() => {
-    if (!id) {
+    if (!announcementBar) {
       return;
     }
+    const {id} = announcementBar;
+
+    let viewedId = localStorage.getItem(STORAGE_ID_KEY);
+
+    // retrocompatibility due to spelling mistake of default id
+    // see https://github.com/facebook/docusaurus/issues/3338
+    if (viewedId === 'annoucement-bar') {
+      viewedId = 'announcement-bar';
+    }
 
-    const viewedId = localStorage.getItem(STORAGE_ID_KEY);
     const isNewAnnouncement = id !== viewedId;
 
     localStorage.setItem(STORAGE_ID_KEY, id);
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 5d6e919dc977..279ea29f0042 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -166,7 +166,7 @@ const ThemeConfigSchema = Joi.object({
   colorMode: ColorModeSchema,
   image: Joi.string(),
   announcementBar: Joi.object({
-    id: Joi.string(),
+    id: Joi.string().default('announcement-bar'),
     content: Joi.string(),
     backgroundColor: Joi.string().default('#fff'),
     textColor: Joi.string().default('#000'),